wave
wave copied to clipboard
New slider component
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.
![Screenshot 2021-07-02 at 11 13 32](https://user-images.githubusercontent.com/8927747/124251814-99c50c00-db26-11eb-8597-2c2f6aa4f944.png)
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.
@rafael-sepeda can you check on the existing designs to see if they're updated and add the figma link please?
@snapsnapturtle Fun fact: I just asked (reminded, to be honest _) or designers about the existing use cases for this exact component. Because we do not have a proper component in Wave, but in design someone in the past documented this component with many different states (and I have a gut feeling that we do not need most of them).
So let's do that together!