Slider with Regions

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">
    <div class="left-color"></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;
}
.left-color {
    float: left;
    background-color: yellow;
    height: 14px;
    border-radius: 3px 0px 0px 3px;
    width: 50px;
}
.slider {
    background-color: green;
    background-image: none;
}

JavaScript

var startingValues = [33, 66];

$(".slider")
    .slider({
    min: 0,
    max: 100,
    range: true,
    values: startingValues,
    slide: function (event, ui) {
        onSlide(ui)
    },
    create: function (event, ui) {
        onSlide({
            values: startingValues
        });
    }
})
    .slider("pips", {
    rest: "label",
    step: 25,
    suffix: "%"
})
    .slider("float", {
    suffix: "%"
});

function onSlide(ui) {
    var totalWidth = $(".slider").width();
    $(".left-color").width((ui.values[0]) / 100 * totalWidth);
}