Esri / Esri/calcite-react

Slider Tick Marks & Labels

Open
#294 2 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
51
Forks
13
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior

The [Slider](https://calcite-react.netlify.com/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](https://vuetifyjs.com/en/components/sliders#ticks)
2 props to control ticks/labels: `ticks` and `tick-size`

[rc-slider](http://react-component.github.io/slider/examples/marks.html)
More complex `marks` prop that takes an object

[Material UI Slider](https://material-ui.com/components/slider/#discrete-sliders)
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](https://user-images.githubusercontent.com/3399064/65465321-2d798c80-de19-11e9-9abb-8b754f1f278c.png)

Continuous, min = 0, max = 10k:
![image](https://user-images.githubusercontent.com/3399064/65465389-687bc000-de19-11e9-89c7-fc93d856d12f.png)

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.