freenowtech / freenowtech/wave
New slider component
- Dominant language
- TypeScript
- Stars
- 67
- Forks
- 31
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 4
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.
```typescript
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.
Contributor guide
Assessment
This issue has not been assessed yet.