Dividing html5 range into sections?

Development Web Development
1

I want to divide an HTML5 range slider into several colored (and labeled with text) sections. Kind of like my terrible MS paint mockup below. It's supposed to be a brake valve, so I need it to be fluid and not just click between the different sections. But I still need labels for the sections like in the mockup so that users can tell what 'stage' of brake application they're in.

2

Javascript my friend.

3

You can do it with CSS, no JavaScript required.

4

I think div's should work for this.

edit: probably not.

Javascript would be easiest.

5

The app uses JS already so if I need to use J's I'll use JS. If it can be done with straight CSS I'd prefer that though.

Would you guys mind making a jsfiddle with your implementation or something?

6

I get off work in an hour, I might be able to whip something up when I get home.

7

bump

8

Maybe take a look at this? https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

You could probably use a CSS gradient for the track.

9

You can use CSS gradients to achieve this.

input[type="range"] {
    height: 7px;
    background-image: linear-gradient(
        to right,
        #FF0000 15%,
        #FF0000 35%,
        #66FF66 35%,
        #6666FF 35%,
        #6666FF 60%,
        #FF9999 60%,
        #FF9999 85%,
        #0000FF 85%
    );
}
10

Thanks for all the suggestions guys! Two things ended up working: A CSS gradient and a table. I can put a <table> beneath the input to allow text-based labeling and compatibility with older browsers, and/or I can also use a CSS gradient to color directly behind the input's track. Thanks for all the input!!!