I’m writing a slider component right now in which i wrap the sp-slider and rebuild the label option.
- By default the sp-slider has unnecessary large height (I can cut that off in my own wrapper)
- Overall the clickable area is too large in my opinion (on the label and excessive height), which might confuse users
- I can’t use the sp-label: I do have a fixed set of values (20), which are specific angles,
for example: 38.65°, 41.99°, 45°, etc.
I can’t influence the label text, it will always show the specified value. However, I don’t want to have a continuous range of values from 0-90°, instead my range value is from 0-20, specifying the index of the angle in my list.
One problem I’m currently facing is that the onChange event only emits upon mouseup, so my custom label can’t be updated while the user drags the slider:
Unfortunately, the real time updates are critical in this case, so I’ll have to use the native slider for now.
Also, the contrast on the sp-slider track is quite bad paired with the default panel background color. As far as I know spectrum components are not customizable in style.
So these are some feature requests I have for the Spectrum-Slider:
- implement ticks or specific sets of accepted values
- alternatively give an option to overwrite the label value (separately from the slider value)
- remove excessive (clickable) whitespace or at least let us control the height or margin. This applies to other spectrum components, too.
- add customizability via CSS (colors, fontSizes, etc)
add an event that emits upon internal value change, not only after mouseup.Make the input event emit values while dragging (not only when the mouse stops moving) or let the mousemove event emit values also when the mouse leaves the slider area.