search

Esri / calcite-react

DEPRECATED - DO NOT USE
https://calcite-react.netlify.com
Apache License 2.0
52 stars 14 forks source link

Slider Tick Marks & Labels #294

Open jpeterson opened 5 years ago

jpeterson commented 5 years ago

Expected Behavior

The Slider component is pretty rudimentary right now, and should support labels and tick marks if desired.

Current Behavior

There is currently no way to display labels or tick marks with the current Slider.

Possible Solution

I think there are a number of ways we could take this implementation. Some possible inspo...

VuetifyJS Slider 2 props to control ticks/labels: ticks and tick-size

rc-slider More complex marks prop that takes an object

Material UI Slider Similar to above, a single marks prop (this time an array of value/label objects)

Context + Screenshots

Two current use cases (pardon the awful mock ups):

Discrete, 3 steps: image

Continuous, min = 0, max = 10k: image

macandcheese commented 5 years ago

If it's useful, we have a lot of this functionality in the new Calcite Component slider: https://github.com/Esri/calcite-components/tree/master/src/components/calcite-slider

slck9596 commented 3 years ago

How can I change the colour marks label "Small", "Medium" and "Large" as shown in the above example? I have difficulties to change the colour, have been trying out various syntax as well as studying material UI code, but, I am not able to change the colour. Great appreciated if anyone can help.