whoisandy / react-rangeslider

A lightweight responsive react range slider component.A fast & lightweight react component as a drop in replacement for HTML5 input range slider element.

Home Page:https://whoisandy.github.io/react-rangeslider/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to change handler style?

zhaoyi0113 opened this issue · 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 It's stated implicitly. Please try to clone the repo and take a look on the docs.

<div className='slider-vertical'>

and the respective .less styling.

.slider-vertical {

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.