New slider component

[snapsnapturtle]

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.

[snapsnapturtle]

@rafael-sepeda can you check on the existing designs to see if they're updated and add the figma link please?

[rafael-sepeda]

@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!