Description
Describe the feature you'd like
Add a new Slider component, which can be used to select a number (or range) between two ranges. We're already using a custom implementation in one of our tools to define the radius of a pickup/dropoff location in meters.
We want to implement the new Slider component according to the designs from https://www.figma.com/file/dTefUItBx5bfbxcCcMzMXm/branch/q5wyukQyaXOZCZCM3BOUn1/Wave-DS?node-id=1702%3A49770 and already have an idea of how the API of the component could look like.
API
Below you can find an idea for which props should be supported by the component to make it work for all our use cases.
export type SliderValue = [ number ] | [ number, number ]
interface SliderProps {
min?: number; // minimum value of slider
max?: number; // maximum value of slider
step?: number; // set the size of each tick on the track, defaults to 1
marks?: boolean; // show a separator for each tick, defaults to false
disabled?: boolean; // disables the slider (like an input)
value: SliderValue // current value (controlled component)
onChange: (value: SliderValue) => void; // will trigger on every step
onFinalChange?: (value: SliderValue) => void; // is executed once the thumb has been released
renderValue?: (value: SliderValue) => string // allow overriding the way the value is rendered also for the tooltip (should probably use ReactNode to stay flexible)
renderTick?: (value: number) => string // allow overriding the render for the min and max tick text below the track (should probably use ReactNode to stay flexible)
// optional props for cool additional features
minDistance?: number // minimum distance between the thumbs (only applicable when multiple thumbs are present)
pearling?: boolean // if true the active thumb will push other thumbs within the constraints of min, max, step and minDistance.
}Other Information
I was already looking at some possible libraries that can make our lives a bit easier and this one feels pretty solid in terms of performance: https://github.com/zillow/react-slider. Another implementation which probably has a better code in terms of React we have the base web version here, but it's not very fast https://baseweb.design/components/slider/. We might also want to implement our own solution.