react-rangeslider icon indicating copy to clipboard operation
react-rangeslider copied to clipboard

How to change handler style?

Open zhaoyi0113 opened this issue 6 years ago • 2 comments

I can see there are different handler styles on the demo page (https://whoisandy.github.io/react-rangeslider/) like below screenshot. I wonder how I can change the handler to circle or rectangle.

image

zhaoyi0113 avatar Apr 05 '18 10:04 zhaoyi0113

@zhaoyi0113 It's stated implicitly. Please try to clone the repo and take a look on the docs.

https://github.com/whoisandy/react-rangeslider/blob/28b957e41feb78624a52ecee204018e928873b6f/docs/components/sliders/orientation.js#L30

and the respective .less styling.

https://github.com/whoisandy/react-rangeslider/blob/28b957e41feb78624a52ecee204018e928873b6f/docs/app.less#L357

haruelrovix avatar May 08 '18 07:05 haruelrovix

custom example

In order to customize the style (for custom video controls in photo) I just copied the css into my project and editted it to meet my needs. Looking at the source code helps to see how this component is put together. The docs recommend importing the stylesheet which is fine if you want the default look. I also figured out that wrapping the slider in a container div allowed me to add other event listeners - for mouse wheel events - for example. Figured I would leave a comment just because it look a little time and tinkering to figure out what I have so far. Great, flexible component.

benjaminadk avatar Sep 06 '18 08:09 benjaminadk