npnm/NpnSlider

How to style the slider ?

Closed this issue · 3 comments

Can you please add documentation how to change the style of the slider ?

I want know how to do styling the slider range.

npnm commented

There is no direct way available to change default style of npn-slider. You have to write down your custom CSS3 style. You can use the class names to target the html elements/tags. You can inspect elements in browser to understand its structure, current style.

Basic html used for npn-slider.

<div class="slider">
    <div class="bar">
        <span class="left-handle">
            <span class="handle-tooltip"><!--tooltip value1--></span>
        </span>
        <div class="filler">
            <div class="step-indicators">
                <span><!--indicator1--></span>
                <span><!--indicator2--></span>
                <span><!--indicator3--></span>
            </div>
            <span><!--act like the bar in b/w handler - filled with background color--></span>
        </div>
        <span class="right-handle">
            <span class="handle-tooltip"><!--tooltip value2--></span>
        </span>
    </div>
    <div class="values">
        <span><!--value1--></span>
        <span><!--value2--></span>
    </div>
</div>

npn-slider

I hope these details will help you to apply custom style to npn-slider. cheers!

npnm commented

I hope my suggestions are helpful for you guys. if not please let me know.