search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

Add mark and thumb labels #240

Closed angelod1as closed 2 years ago

angelod1as commented 2 years ago

Purpose

This PR adds data-label and data-mark-label to thumbs and marks respectively. They can be used in order to customize thumbs and marks further.

This minor addition makes working with custom marks and labels easier and, as it's a data attribute, won't impact rendering in any way.

(ps: I've never worked with styleguidist so please let me know if I've missed something).

This fixes #239 as using these labels I can target specific thumbs and marks for customization.

stonebk commented 2 years ago

The preferred way to do this would be to use renderMark and/or renderThumb to add your own custom data attributes rather than hard-code them into the library. Here is an example:

https://codesandbox.io/s/sad-dawn-zjeld?file=/src/App.js

stonebk commented 2 years ago

You can also use markClassName and/or thumbClassName for targeting purposes.

angelod1as commented 2 years ago

renderThumb works because it gets the label. RenderMark doesn't, and markClassName adds the same class for every mark. My intention was adding a difference between marks, mainly. I added the thumb version for convenience. There's no way to set a mark different from the other at the library current version.

stonebk commented 2 years ago

I see -- it would make sense then to add a state param to the renderMark callback like we do for renderThumb: https://github.com/zillow/react-slider/blob/master/src/components/ReactSlider/ReactSlider.jsx#L1016-L1020

Is this something you would like to add?

angelod1as commented 2 years ago

I could do that, yes. That would indeed solve my issue and add to the library.