material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.13k stars 2.15k forks source link

[Slider] Add feature to start slider from middle #5740

Open e111077 opened 4 years ago

e111077 commented 4 years ago

Feature Request

When material 2 slider is being implemented, please add a feature such that the slider can start from the middle and be dragged either direction. An example would be a saturation slider. Where 0 is in the middle, dragging right increases saturation and dragging left decreases saturation. The control can return a value range from [-1, 1].

Additional context

Requested internally. Contacted Andrew to follow up on design of this feature request

MrSimmmons commented 4 years ago

Good idea, however it doesn't require that much Javascript to just add this in your self. Setting the middle is just setting the value of the slider to the max minus the min. And then if you want a range from -1 to 1, you just map whatever value comes out of the slider from its range, to the new range you want. Example Code Pen with comments: https://codepen.io/MrSimmons/pen/vYOVmLL

e111077 commented 4 years ago

The issue in particular is losing the affordance of the primary bar since the primary colored bar in the default MDC case starts from the left and not from the middle / 0 as well. Spoke to one of the designers and they said the team will begin speccing out guidance on this component (or whether or not it should be considered a new component)

MrSimmmons commented 4 years ago

ahhhh ok. That makes sense