jQM 1.4 Slider with TickMarks

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
       
        <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> 
    
    </div>
</div>

CSS

.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;   
}

JavaScript

$(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);
});