Cool Slider

Functional Slider using only css for visual and jquery/jquery ui for dragging functionality.

by AntonLapshin

HTML

<div class="outer-slider">
    <div class="slider">
        <ul class="bars">
            <li class="bar bar1 on"></li>
            <li class="bar bar2 on"></li>
            <li class="bar bar3"></li>
            <li class="bar bar4"></li>
        </ul>
        <div class="knob"></div>
    </div>
</div>
<p class="pos"></p>

CSS

body { background: #ddd; }
.outer-slider { 
    height: 24px;
    width: 207px;
    padding-top: 6px;
    -webkit-border-radius: 15px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5c5c5), color-stop(100%,#fff));
}
.slider {
    margin: 0px 6px;
    width: 195px;
    height:18px;
    background: #ddd;
    -webkit-border-radius: 9px;
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .4);
    position: relative;
}
.bar {
    height: 1px;
    background: #8c8c8c;
    border-bottom: 1px solid #e8e8e8;
    width: 38px;
    position: absolute;
    list-style: none;
    top: 9px;
}
.bar1 {
    left: 11px;
}
.bar2 {
    left: 56px;
}
.bar3 {
    left: 101px;
}
.bar4 {
    left: 146px;
}
.on { 
    background: #f00;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .5);
    border-bottom: 1px solid #f4dcdc;
}
.knob {
    position: absolute;
    top: -6px;
    left: 83px;
    width: 28px;
    height: 28px;
    -webkit-border-radius: 15px;
    background: #eee;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    background-color: #eee;
    background-image:
        /* radial gradients
        -webkit-gradient(radial, 0% 0%, 10, 50% 50%, 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 1)))
        */
        
        -webkit-gradient(linear, 0% 0%, 100% 10%, color-stop(0.15,rgba(217, 217, 217, 0.5)), color-stop(0.5,rgba(255, 255, 255, .25)), color-stop(0.85, rgba(217, 217, 217, 0.5))), 
        
        -webkit-gradient(linear, 10% 0%, 0% 100%, color-stop(0.15,rgba(217, 217, 217, 0.5)), color-stop(0.5,rgba(255, 255, 255, .25)), color-stop(0.85, rgba(217, 217, 217, 0.25))), 
        
        -webkit-gradient(linear, 0% 0%, 100% 10%, color-stop(0.15,rgba(217, 217, 217, 0.5)), color-stop(0.5,rgba(255, 255, 255, .5)), color-stop(0.55, rgba(217, 217, 217, 0.5))), 
        
        -webkit-gradient(linear, 10% 0%, 0% 100%, color-stop(0.15,rgba(217, 217, 217, 0.5)), color-stop(0.5,rgba(255, 255, 255, .5)),...

JavaScript

$(document).ready(function() {

    $('.knob').draggable({ containment: 'parent', axis: 'x', drag:
                           function(event, ui) { 
                               var knobpos = $(this).position().left;
                               $('li').removeClass('on');
                               if (knobpos >= 27) {
                                   $('.bar1').addClass('on');
                               }
                               if (knobpos > 70) { 
                                   $('.bar2').addClass('on');
                               }
                               if (knobpos >= 115) { 
                                   $('.bar3').addClass('on');
                               }
                               if (knobpos >= 155) { 
                                   $('.bar4').addClass('on');
                               }
                           }
                         });

});