react-rangeslider
react-rangeslider copied to clipboard
How to change handler style?
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
.
@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
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.