slider {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 100%;
    margin: 25px 5px 25px 5px;
    vertical-align: middle;
}

    slider span {
        white-space: nowrap;
        position: absolute;
        display: inline-block;
    }

        slider span.base {
            width: 100%;
            height: 100%;
            padding: 0;
        }

        slider span.bar {
            width: 100%;
            height: 100%;
            z-index: 0;
            -webkit-border-radius: 1em/1em;
            border-radius: 1em/1em;
            background-color: #9f9fa0;
            background- transition: opacity .10s;
            /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(1, #8d8d8d));
            background: -webkit-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);
            background: -moz-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);
            background: -o-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);
            background: -ms-linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);
            background: linear-gradient(top, #c0c0c0 0, #8d8d8d 100%);*/
            /*-webkit-box-shadow: inset 2px 2px 5px;*/
            /*box-shadow: inset 2px 2px 5px;*/
        }

            slider span.bar.selection {
                width: 100%;
                z-index: 1;
                /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #13b6ff), color-stop(1, #00a8f3));
                background: -webkit-linear-gradient(top, #13b6ff 0, #00a8f3 100%);
                background: -moz-linear-gradient(top, #13b6ff 0, #00a8f3 100%);
                background: -o-linear-gradient(top, #13b6ff 0, #00a8f3 100%);
                background: -ms-linear-gradient(top, #13b6ff 0, #00a8f3 100%);
                background: linear-gradient(top, #13b6ff 0, #00a8f3 100%);*/
                -webkit-box-shadow: initial;
                box-shadow: none;
            }

        slider span.pointer {
            cursor: pointer;
            width:35px;
            height: 40px;
            top: -15px;
            background-color: #6495ed;
            border: 2px solid #6495ed;
            z-index: 2;
            -webkit-border-radius: 2em/2em;
            border-radius: 0.5em/0.5em;
        }

            slider span.pointer:after {
                content: '';
                background-color: #ffffff;
                width: 10px;
                height: 10px;
                position: absolute;
                top: 15px;
                left: 13px;
                -webkit-border-radius: 1em/1em;
                border-radius: 1em/1em;
            }

            slider span.pointer:hover:after {
                background-color: #ffffff;
            }

            slider span.pointer.active:after {
                background-color: #ffffff;
            }

        slider span.bubble {
            cursor: default;
            top: -22px;
            padding: 1px 3px 1px 3px;
            font-size: 0.7em;
            font-family: sans-serif;
            background-color: #ffffff;
        }

            slider span.bubble.selection {
                top: 15px;
            }

            slider span.bubble.limit {
                color: #808080;
            }