Repository URL to install this package:
Version:
0.9.5 ▾
|
import React from 'react'
import { RangeState } from './RangeState'
import { isFunction } from 'exotic'
import {
StyledThumb,
StyledOutput,
StyledRange,
StyledWrap,
} from './_themed'
// #index
class RangeInput extends React.Component {
static defaultProps = {
isReverse: false,
isDualSlider: false,
}
// if this state was through context or we call an external action
// then we can use the same label for both inputs, and voila, multi
constructor(props) {
super()
this.setDefaultValue(props)
}
state = new RangeState()
setDefaultValue = (props) => {
const { min, max, step } = props
if (min) {
this.state.setProps('min', props.min)
}
if (max) {
this.state.setProps('max', props.max)
}
if (step) {
this.state.setProps('step', props.step)
}
}
identifier = 'range-input-price-slider'
setSliderInputValue = value => {
let labelVal = value
if (this.props.isDualSlider) {
if (this.props.isReverse) {
labelVal = this.state.max - Number(value)
} else {
labelVal = this.state.max + Number(value)
}
}
this.state.setValue(value)
this.state.setLabel(labelVal)
console.event('[i] changed Value', value, '[ii] label Value', labelVal)
}
handleChange = event => {
const value = event.target.value
this.setSliderInputValue(value)
if (isFunction(this.props.onChange)) {
this.props.onChange(value)
}
}
render() {
const { isReverse, width } = this.props
return (
<StyledWrap className="Styled-Wrapper">
<StyledThumb className="Styled-Thumb"
value={this.state.percent}
reverse={isReverse}
/>
<StyledRange
min={this.state.min}
step={this.state.step}
max={this.state.max}
// now the state is the controller
value={this.state.value}
// html5 itself gives all events
onChange={this.handleChange}
id={this.identifier}
reverse={isReverse}
className="Styled-Range-Slider"
width={width ? width : ''}
/>
<StyledOutput className="Styled-output" htmlFor={this.identifier} >
{this.state.getlabel}
</StyledOutput>
</StyledWrap>
)
}
}
export { RangeInput }
export default RangeInput