Slider Test

by Hugo Carneiro

HTML

<div class="container">
    <!-- SLIDER -->
    <div class="form-group">
        <label for="slider1" class="col-sm-6 control-label">Slider.</label>
        <div class="col-sm-6">
            <div class="rail">
                <div class="thumb">
                    <div class="thumb-expanded hide">10</div>
                    10
                </div>
            </div>
            <input type="range" name="slider1" id="slider1" min="0" max="10" value="5" step="1" class="hide">
        </div>
    </div>
</div>

CSS

.container {
    margin-top:200px;
}
/* SLIDER */
 .rail {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: #fbfbfb;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    -webkit-transform: translate3d(0, 0, 0);
    padding: 0 5px;
}
.thumb {
    width: 48px;
    height: 34px;
    border-radius: 3px;
    background:url('../images/slider-bg.png') right top no-repeat;
    background-color: #f0981b;
    cursor: pointer;
    margin-top: -12px;
    /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    padding: 7px 13px;
    text-align: center;
}
.thumb-expanded {
    position: absolute;
    top: -52px;
    left:-1px;
    width: 60px;
    height: 40px;
    border-radius: 3px;
    background:url('../images/slider-bg-2.png') right top no-repeat;
    cursor: pointer;
    box-shadow: 0px -3px 3px rgba(0, 0, 0, 0.2);
    padding: 10px 13px;
    text-align: center;
    background-color: #f0981b;
}
.thumb-expanded:before {
    content:'';
    display: block;
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 9px 9px 0;
    border-color: transparent #f0981b transparent transparent;
    ;
}
.thumb-expanded:after {
    content:'';
    display: block;
    position: absolute;
    bottom: -7px;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 9px 0 0;
    border-color: #f0981b transparent transparent transparent;
}

JavaScript

/* Slider pop-up */
$('.thumb').mousedown(function () {
    $(this).find('.thumb-expanded').removeClass('hide');
}).mouseup(function () {
    $(this).find('.thumb-expanded').addClass('hide');
});