search

react-component / slider

React Slider
https://slider.react-component.now.sh/
MIT License
3.05k stars 775 forks source link

Custom colors / sizes #171

Closed patrickdevivo closed 8 years ago

patrickdevivo commented 8 years ago

It would be nice to be able to control the color / size of the handle and rail via props rather than modifying the stylesheet

just-boris commented 8 years ago

Could you please elaborate more, why overriding CSS will not work for you? It is the standard solution that works for a lot of other UI-components, not only here.

Is it related with CSS-modules? If so, see #154, it has very long discussion about that.

patrickdevivo commented 8 years ago

Sure. This is a slick and useful component that looks great with the default styles / settings, but for my use case (and I imagine it's a common one) I just wanted to modify the default look slightly to match the theme of the page I'm using it on. For me all that meant was modifying the@primary-color in the index.less file (I also made the handle a bit larger). I ended up copying the modified less file into my application and including it explicitly, which is no problem, but an extra step (also what happens if the library gets updated, and the css selectors need to change, my modified less will get out of date).

It would be cool if the primary color and the handle / rail size could be modified via props, instead of directly via css, so a base css file can be imported and then other basic styling options are handled via props. This would also allow multiple sliders on a single page to look slightly different (different colors say).

Just a suggestion!

Thanks for making this component, it's very useful and slick.

benjycui commented 8 years ago

Maybe you can try antd.Slider, it's just a shallow wrapper of rc-slider and maintained by the same team.

But antd supports customized thems with LESS variables, which may solve your problem.

benjycui commented 8 years ago

Actually, the recommended way is to use antd directly. react-component is for someone need high flexibility