.rangeslider
{
    position: relative;

    background: rgba(0,0,0,.1);
}

.rangeslider--horizontal
{
    width: 100%;
    height: 2px;
}

.rangeslider--vertical
{
    width: 2px;
    height: 100%;
}

.rangeslider--disabled
{
    opacity: .4;

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}

.rangeslider__fill
{
    position: absolute;
}
.rangeslider--horizontal .rangeslider__fill
{
    top: 0;

    height: 100%;
}
.rangeslider--vertical .rangeslider__fill
{
    bottom: 0;

    width: 100%;
}

.rangeslider__handle
{
    position: absolute;

    display: inline-block;

    width: 20px;
    height: 20px;

    cursor: pointer;

    border-radius: 50%;
    border-radius: 50%;
    background: #f00;
    box-shadow: 0 5px 10px rgba(255,0,0,.3);
}

.rangeslider__handle:after
{
    color: #fff;
    font: 14px/40px PT Sans;

    position: absolute;
    left: 50%;

    width: 80px;
    height: 40px;
    margin-top: 40px;
    margin-left: -40px;

    content: attr(data-value);
    text-align: center;

    border-radius: 5px;
    background: #f00;
}

.rangeslider__handle:before
{
    position: absolute;
    top: 33px;
    left: 50%;

    display: block;

    width: 14px;
    height: 7px;
    margin-left: -7px;

    content: '';

    border-right: 7px solid transparent;
    border-bottom: 7px solid #f00;
    border-left: 7px solid transparent;
}

.rangeslider--vertical .rangeslider__handle:after
{
    top: 50%;
    right: 40px;
    left: auto;

    margin-top: -20px;
    margin-left: 0;
}

.rangeslider--vertical .rangeslider__handle:before
{
    top: 50%;
    right: 26px;
    left: auto;

    margin-top: -7px;
    margin-left: 0;

    border: none;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #f00;
}

.rangeslider--horizontal .rangeslider__handle
{
    top: -10px;

        touch-action: pan-y;
    -ms-touch-action: pan-y;
}
.rangeslider--vertical .rangeslider__handle
{
    left: -10px;

        touch-action: pan-x;
    -ms-touch-action: pan-x;
}

input[type='range']:focus + .rangeslider .rangeslider__handle
{
    -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, .9);
       -moz-box-shadow: 0 0 8px rgba(255, 0, 255, .9);
            box-shadow: 0 0 8px rgba(255, 0, 255, .9);
}