Modern, Usable, Responsive Sliders.

index.html

<div class="stuff">
    
    <h1>Modern, Cute, Usable Sliders.</h1>

    <main>
        <div id="flat-slider"></div>
        <div id="flat-slider-vertical-1"></div>
        <div id="flat-slider-vertical-2"></div>
        <div id="flat-slider-vertical-3"></div>
    </main>

    <p>Check them out and even more at: <a href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/#styling-flat" target="_blank">http://simeydotme.github.io/</a></p>

    <p>Heavily inspired by <a target="_blank" href="http://codepen.io/thebabydino/pen/RNEEZP">Ana Tudor's Codepen</a> where she does some amazing (and way too complicated for me) css tricks to style HTML5 range inputs in a similar style.</p>

</div>

Modern, Usable, Responsive Sliders..markdown

Modern, Usable, Responsive Sliders.

Based on Ana Tudor's styling of Range Sliders, I have used my own extension for jQueryUI to create really usable and pretty range sliders.

A Pen by Simon Goellner on CodePen.

License.

script.js

$.extend( $.ui.slider.prototype.options, { 
    animate: 300
});

$("#flat-slider")
    .slider({
        max: 50,
        min: 0,
        range: true,
        values: [15, 35]
    })
    .slider("pips", {
        first: "pip",
        last: "pip"
    });

$("#flat-slider-vertical-1")
    .slider({
        max: 25,
        min: 0,
        range: "min",
        value: 25,
        orientation: "vertical"
    });

    $("#flat-slider-vertical-2")
    .slider({
        max: 25,
        min: 0,
        range: "max",
        value: 12,
        orientation: "vertical"
    });

$("#flat-slider-vertical-3")
    .slider({
        max: 25,
        min: 0,
        range: "min",
        value: 0,
        orientation: "vertical"
    });

    $("#flat-slider-vertical-1, #flat-slider-vertical-2, #flat-slider-vertical-3")
    .slider("pips", {
        first: "pip",
        last: "pip"
    })
    .slider("float");

scripts

<script src="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/js/jquery-plus-ui.min.js"></script>
<script src="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/js/jquery-ui-slider-pips.js"></script>

style.scss

$bg: #434d5a;

[id*=flat-slider].ui-slider,
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
    background: lighten($bg, 25%);
}

[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
    border-left-color: #434d5a;
}


[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover, 
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus, 
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
      border-color: white; }









body {
    background: #434d5a;
    font-family: "Roboto";
}
h1 {
    color: lighten($bg, 25%);
    padding: 0;
    margin: 0;
    user-select: none;
    cursor: default;
}
p {
    color: lighten($bg, 50%);
    text-align: center;
    margin: 0.5em 1em;
    font-weight: 300;
    font-size: 1.3em;
    
    &:nth-of-type(1) {
        margin-top: 3em;
    }
    
    &:last-child {
        font-weight: 100;
        font-size: 1em;
        a {
            font-weight: 300;
        }
    }
}

.stuff {
    
    padding: 50px 50px 50px;
    max-width: 900px;
    margin: auto;
    
}

@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,600);

styles

<link href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/css/jqueryui.min.css" rel="stylesheet" />
<link href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/css/jquery-ui-slider-pips.min.css" rel="stylesheet" />
<link href="http://simeydotme.github.io/jQuery-ui-Slider-Pips/dist/css/app.min.css" rel="stylesheet" />