README
React Slider
CSS agnostic slider component for React.
See demo: https://mpowaga.github.io/react-slider/
Installation
npm install react-slider
Overview
Single slider:
Similar to <input type="range" defaultValue={50} />
React.render(<ReactSlider defaultValue={50} />, document.body);
Double slider (with bars between the handles):
React.render(<ReactSlider defaultValue={[0, 100]} withBars />, document.body);
Multi slider:
React.render(<ReactSlider defaultValue={[0, 33, 67, 100]} withBars />, document.body);
Provide custom handles:
React.render(
<ReactSlider withBars>
<div className="my-handle">1</div>
<div className="my-handle">2</div>
<div className="my-handle">3</div>
</ReactSlider>,
document.body
);
Now you can style it as you want. Checkout the index.html
example to see how.
Properties
min {number} default: 0
The minimum value of the slider.
max {number} default: 100
The maximum value of the slider.
step {number} default: 1
Value to be added or subtracted on each step the slider makes.
Must be greater than zero.
max - min
should be evenly divisible by the step value.
minDistance {number} default: 0
The minimal distance between any pair of handles. Zero means they can sit on top of each other.
defaultValue {oneOfType([number, arrayOf(number)])} default: 0
Determines the initial positions of the handles and the number of handles if the component has no children.
If a number is passed a slider with one handle will be rendered. If an array is passed each value will determine the position of one handle. The values in the array must be sorted. If the component has children, the length of the array must match the number of children.
value {oneOfType([number, arrayOf(number)])} default: 0
Like defaultValue
but for controlled components.
orientation {oneOf(['horizontal', 'vertical'])} default: 'horizontal'
Determines whether the slider moves horizontally (from left to right) or vertically (from top to bottom).
className {string} default: 'slider'
The css class set on the slider node.
handleClassName {string} default: 'handle'
The css class set on each handle node.
In addition each handle will receive a numbered css class of the form ${handleClassName}-${i}
,
e.g. handle-0
, handle-1
, ...
handleActiveClassName {string} default: 'active'
The css class set on the handle that is currently being moved.
withBars {boolean} default: false
If true
bars between the handles will be rendered.
barClassName {string} default: 'bar'
The css class set on the bars between the handles.
In addition bar fragment will receive a numbered css class of the form ${barClassName}-${i}
,
e.g. bar-0
, bar-1
, ...
pearling {bool} default: false
If true
the active handle will push other handles within the constraints of min
, max
, step
and minDistance
.
disabled {bool} default: false
If true
the handles can't be moved.
snapDragDisabled {bool} default: false
Disables handle move when clicking the slider bar.
invert {bool} default: false
Inverts the slider.
onBeforeChange {func}
Callback called before starting to move a handle.
onChange {func}
Callback called on every value change.
onAfterChange {func}
Callback called only after moving a handle has ended or when a new value is set by clicking on the slider.
onSliderClick {func}
Callback called when the the slider is clicked (handle or bars). Receives the value at the clicked position as argument.
ariaLabel {oneOfType([string, arrayOf(string)])}
aria-label for screen-readers to apply to the handles. Use an array for more than one handle. The length of the array must match the number of handles in the value array.
ariaValuetext {string}
aria-valuetext for screen-readers
Methods
getValue
Returns the current value of the slider, which is a number in the case of a single slider, or an array of numbers in case of a multi slider.
License
See the License file.