Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to style the slider ? #5

Closed
joer33304 opened this issue Jan 27, 2019 · 3 comments
Closed

How to style the slider ? #5

joer33304 opened this issue Jan 27, 2019 · 3 comments

Comments

@joer33304
Copy link

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

@DanielBorel
Copy link

I want know how to do styling the slider range.

@npnm
Copy link
Owner

npnm commented May 28, 2019

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
Copy link
Owner

npnm commented May 28, 2019

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

@npnm npnm closed this as completed May 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants