.at-multirange-slider {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #999999;
    height: 1em;
    padding-top: .5em;
}

    .at-multirange-slider .slider {
        border: 1px solid silver;
        height: 0.5em;
        position: relative;
    }

    .at-multirange-slider .slider-range {
        box-sizing: border-box;
        display: inline-block;
        height: 100%;
        position: relative;
        vertical-align: top;
    }

    .at-multirange-slider .slider-handle {
        border-radius: 1em;
        background: #fff;
        cursor: pointer;
        border: 2px solid gray;
        height: 1em;
        position: absolute;
        right: -0.4em;
        text-align: center;
        top: -0.3em;
        width: 1em;
        z-index: 100;
    }

        .at-multirange-slider .slider-handle:hover {
            background: #ddd;
        }

    .at-multirange-slider .slider-range:last-child .slider-handle {
        display: none;
    }

    .at-multirange-slider .slider-label-top {
        font-size: .75em;
        display: block;
        position: absolute;
        text-align: center;
        top: -1.5em;
        width: 100%;
    }

    .at-multirange-slider .slider-label-bottom {
        font-size: .75em;
        display: block;
        line-height: 0.7em;
        position: absolute;
        text-align: center;
        top: 1.3em;
        width: 100%;
    }

    .at-multirange-slider .slider-handle .slider-handle-label {
        font-size: .75em;
        position: absolute;
        right: -0.4em;
        text-align: center;
        top: 3em;
    }

.slider {
    background: #022;
}

.color-range-5 {
    background-color: powderblue;
}

.color-range-4 {
    background-color: red;
}

.color-range-3 {
    background-color: orange;
}

.color-range-2 {
    background-color: yellow;
}

.color-range-1 {
    background-color: green;
}

.color-range-0 {
    background-color: gray;
}