Top
Slider - Getting started
Slider
Zippytech React Toolkit is distributed via npm. So getting it installed is as easy as:
$ npm install @zippytech/react-toolkit --save
Or, if you are using yarn you have to run:
$ yarn add @zippytech/react-toolkit
To start using the <Slider /> component, all you need to import is React, the code and styles of the component itself: @zippytech/react-toolkit/Slider or@zippytech/react-toolkit/Slider/RangeSlider and @zippytech/react-toolkit/Slider/index.css.
This is the most basic setup for a <Slider />. In the following sections we'll explore how to use the <Slider /> in various scenarios, styling and supported props.
Use thevalue prop for controlled usage, instead of the uncontrolled defaultValue prop.
In order to get notified of value changes, use onChange(value).
Besides the simple <Slider /> component, we also offer a <RangeSlider />, for selecting a value range. The API of the <RangeSlider /> is very similar to the one of the simple <Slider />, with the exception that the value (and the corresponding uncontrolled defaultValue) is expected to be an array, not a number.