How to add tick marks along jQuery Mobile slider

Question

I have found a similar question asked here: Add tick marks to jQuery slider?

But this deals with the jQuery-UI library and not jQuery Mobile, I'm not sure how well it would crossover.

What I would like to do is to add 5 tick marks along the slider rail of my jQuery Mobile slider widgets- @ 0%, 25%, 50 %, 75%, 100%

How would I go about doing this?

Edit:

I have implemented Sia's solution but now there are some weird line thickness issues I am noticing.

Here is a picture of my sliders with the ticks via Sia's solution:

enter image description here

As you can see, some of the ticks have varying thickness and they seem to repeat in this way for each slider... The css and html for these ticks is exactly the same as Sia's answer save for the inclusion of numbers below the ticks

Here is the relevant JS code:

$(document).on("pageinit",function(){

    var ticks2 = "<div class='tick' id='ticka'></div>"
    ticks2 += "<div class='tick' id='tickb'></div>";
    ticks2 += "<div class='tick' id='tickc'></div>";
    ticks2 += "<div class='tick' id='tickd'></div>";
    ticks2 += "<div class='tick' id='ticke'></div>";
    ticks2 += "<div class='tick' id='tickf'></div>";
    ticks2 += "<div class='tick' id='tickg'></div>";
    ticks2 += "<div class='tick' id='tickh'></div>";

    $("div.ui-slider-track").append(ticks2);
    ...
    }

And the CSS:

.tick {
    width: 1px;
    background-color:#3388cc;
    height:100%;
    position:absolute;
    bottom:0px;
}

#ticka{
    margin-left:11.1%;
}

#tickb{
    margin-left:22.2%;
}

#tickc{
    margin-left:33.3%;
}
#tickd{
    margin-left:44.4%;
}

#ticke{
    margin-left:55.5%;
}

#tickf{
    margin-left:66.6%;
}
#tickg{
    margin-left:77.7%;
}

#tickh{
    margin-left:88.8%;
}

Make sure you only add the tickmatks once. Do it on pageinit and you can also test to see if the tickmarks are already there for each slider: $("div.ui-slider .tick").length > 0 — ezanker, Apr 24 '14 at 12:58
Well it's odd because when I load the page in chrome on my pc it looks and operates fine, but when I load the page via my phonegap app on Android, this issue occurs... I have edited the original post to include the js code relevant to this. — Gthoma2, Apr 24 '14 at 19:12
With multiple sliders on the page, you may be having problems with non-unique ids for the ticks on the page. My solution relies only on classes and not IDs so you may want to try it... — ezanker, Apr 24 '14 at 19:59
Ah alright, well I actually solved the problem by making the width 2px... I know that this only covers up the actual issue, but it seems to work. Are these lines being drawn over themselves, though? Will this cause a possible performance issue? — Gthoma2, Apr 24 '14 at 20:09
I don't know what is actually happening on your device. Here is the alternative using my solution: http://jsfiddle.net/ezanker/TL7M2/10/ — ezanker, Apr 24 '14 at 20:19

score 4 · Accepted Answer · answered Apr 21 '14 at 16:56

Sia has given you a nice solution. In addition, you can look at this blog entry for some ideas on enhancing the slider widget (full disclosure, I wrote it):

Fun with the Slider Widget

There is an example of adding tick marks and you could also consider the example of the color DIVs with labels in the slider track. Here is a fiddle with the 2 techniques included:

DEMO

<div id="tickMarks" >
    <label for="theSlider2">Slider with Tick marks:</label>
    <input type="range" name="theSlider2" id="theSlider2" min="0" max="100" value="60" />
</div> 
<br /><br />
<div id="tickMarks2" >
    <label for="theSlider3">Slider Background Ranges:</label>
    <input type="range" name="theSlider3" id="theSlider3" min="0" max="100" value="55" />
</div>

The javascript dynamically creates the background DIVs and inserts them into the slider track:

$(document).on("pagecreate", "#page1", function () {
    var ticks  = '<div class="sliderTickmarks "><span>0%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>25%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>50%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>75%</span></div>';
        ticks += '<div class="sliderTickmarks "><span>100%</span></div>';

   $("#tickMarks .ui-slider-track").prepend(ticks);


    var colorback  = '<div class="sliderBackColor color1">0-24%</div>';
        colorback += '<div class="sliderBackColor color2">25-50%</div>';
        colorback += '<div class="sliderBackColor color3">50-75%</div>';        
        colorback += '<div class="sliderBackColor color4">75-100%</div>';

    $("#tickMarks2 .ui-slider-track").prepend(colorback);
});

The CSS for tickmarks leaves the DIVs transparent and adds a right border to the middle DIVS for the vertical tick marks. The inner SPANS are moved using relative poritioning to below the track. For the color DIVs, we add background colors and some corner rounding to the first and last DIVs so they match the rounding of the track:

.sliderTickmarks{
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    height: 100%;
    width: 25%;    
    float: left;
    border-right: 1px solid #888;
}
.sliderTickmarks span{
    position: relative;
    left: 100%;
    top: 125%;
    margin-left: -10px;
    font-size: 12px;
    font-weight: normal;
}

.ui-slider-track > div.sliderTickmarks:first-child{
    border-right: 0;
    width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
    margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
     border-right: 0;
}

.sliderBackColor{
    height: 100%;
    width: 25%;    
    float: left;
    color: white;
    text-align: center;
    font-size: 10px;
    font-weight: normal;
    text-shadow: 0px 1px 2px #333;
}
.color1 { background-color: #D6AA26;}
.color2 { background-color: #93A31C;}
.color3 { background-color: #408156;}
.color4 { background-color: #30374F;}

.ui-slider-track > div.sliderBackColor:first-child{
    border-top-left-radius: 0.3125em;
    border-bottom-left-radius: 0.3125em;
}
.ui-slider-track > div.sliderBackColor:last-of-type{
    border-top-right-radius: 0.3125em;
    border-bottom-right-radius: 0.3125em;   
}

These are some amazing solutions. Thank you! – Gthoma2 Apr 23 '14 at 19:32 — Gthoma2, Apr 23 '14 at 19:32

score 2 · Answer 2 · answered Apr 17 '14 at 20:42

This is probably not the most elegant solution but I think it's what you are looking for

Example: http://jsfiddle.net/gravitybox/5tfPj/

js

$(document).ready(function() {
$("div.ui-slider").append("<div class='tick' id='percent25'></div><div class='tick' id='percent50'></div><div class='tick' id='percent75'></div><div class='number' id='number0'>0</div><div class='number' id='number25'>25</div><div class='number' id='number50'>50</div><div class='number' id='number75'>75</div><div class='number' id='number100'>100</div>");

});

css

.tick {
    width: 1px;
    background-color:#999999;
    height:5px;
    position:absolute;
    bottom:0px;
}

#number0{
     margin-left:0%;   

}

#percent25, #number25{
     margin-left:25%;   

}
#percent50, #number50{
     margin-left:50%;   

}
#percent75, #number75{
     margin-left:75%;   

}

#number100{
     margin-left:100%;   

}

.number {
    position:absolute;
    top:18px;
    left:-5px;
    bottom:0px;
    font-size:10px;
    color:#999999;
}

Hey Sia, I've implemented your solution but I am noticing that each tick is being redrawn whenever I load a page with a slider in it... I have about 7 pages that feature sliders so i imagine what is happening is that by the time I reach page 7, the ticks on page 7 have been drawn over 7 times. How would I apply these tick marks to all sliders on all of my pages but make it so that they are not redrawn again and again? Thank you! — Gthoma2, Apr 23 '14 at 20:39
I don't think your original question said that you wanted to use the slider multiple times on a page. Ezankers solution should work for what you want. — Sia, Apr 24 '14 at 16:48

How to add tick marks along jQuery Mobile slider

2 Answers2