Slider with Regions - CSS ONLY

by bizamajig

HTML

<link rel="stylesheet" href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.css">
<script src="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.js"></script>
<div class="slider-container">
<div class="slider"></div>
</div>

CSS

.ui-state-default:first-of-type, .ui-widget-content .ui-state-default:first-of-type, .ui-widget-header .ui-state-default:first-of-type {
    background: blue;
}
.ui-state-default:last-of-type, .ui-widget-content .ui-state-default:last-of-type, .ui-widget-header .ui-state-default:last-of-type {
    background: green;
}
.ui-slider .ui-slider-range {
    background: blue;
}

.ui-slider .ui-slider-range:before,
.ui-slider .ui-slider-range:after {
    display:block;
    height:14px;
    content:'';
    background:yellow;
    right:100%;
    top:0px;
    left: -1000px;
    position:absolute;
}

.ui-slider .ui-slider-range:after {
    background:green;
    left:100%;
    right:-1000px;
}

.slider-container {
    overflow:hidden;
    padding:5px
}

JavaScript

$(".slider")                  
    .slider({ 
        min: 0, 
        max: 100, 
        range: true, 
        values: [33, 66] 
    })                   
    .slider("pips", {
        rest: "label",
		step: 25, 
		suffix: "%"
    })                   
    .slider("float", {
		suffix: "%"
    });