freenowtech / freenowtech/wave

New slider component

Open
#126 2 comments 0 reactions 1 assignee Claimed by @rafael-sepeda View on GitHub
enhancement
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.

Screenshot 2021-07-02 at 11 13 32

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.