react-as-range-slider
Number Slider
Default
0
<![CDATA[
<NumberSlider onChange={val => document.querySelector('#normal-result').textContent = val}/>
]]>
Minimum and maximum
100
<![CDATA[
<NumberSlider max={200} min={100} onChange={val => document.querySelector('#normal-limit-result').textContent = val}/>
]]>
Step
100
<![CDATA[
<NumberSlider step={10} max={200} min={100} onChange={val => document.querySelector('#normal-step-result').textContent = val}/>
]]>
Width
100
<![CDATA[
<NumberSlider step={10} width={600} max={200} min={100} onChange={val => document.querySelector('#normal-width-result').textContent = val}/>
]]>
Default Value
150
<![CDATA[
<NumberSlider defaultValue={150} step={10} width={600} max={200} min={100} onChange={val => document.querySelector('#normal-value-result').textContent = val}/>
]]>
Range Slider
Default
0, 100
<![CDATA[
<RangeSlider onChange={val => document.querySelector('#range-result').textContent = `${val[0]}, ${val[1]}`}/>
]]>
Minimum and maximum
100, 200
<![CDATA[
<RangeSlider max={200} min={100} onChange={val => document.querySelector('#range-limit-result').textContent = `${val[0]}, ${val[1]}`}/>
]]>
Step
100, 200
<![CDATA[
<RangeSlider max={200} min={100} onChange={val => document.querySelector('#range-step-result').textContent = `${val[0]}, ${val[1]}`} step={10}/>
]]>
Width
100, 200
<![CDATA[
<RangeSlider max={200} min={100} onChange={val => document.querySelector('#range-width-result').textContent = `${val[0]}, ${val[1]}`} step={10} width={600}/>
]]>
Default value
120, 180
<![CDATA[
<RangeSlider defaultValue={[120, 180]} max={200} min={100} onChange={val => document.querySelector('#range-value-result').textContent = `${val[0]}, ${val[1]}`} step={10} width={600}/>
]]>
Usage in form
<![CDATA[
function showFormData(e) {
e.stopPropagation();
e.preventDefault();
let target = e.target;
alert(`
Number value: ${target.number.value}
Range value: ${target.range.value}
`);
}
React.render((
<form onSubmit={showFormData}>
<p>
Number Slider: <NumberSlider name="number" min={100} max={200} value={150}/>
</p>
<p>
Range Slider: <RangeSlider name="range" min={100} max={200} value={[120, 180]}/>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
), document.querySelector('#form'));
]]>