#range-slider-example {
    height: 5px;
    background: #ccc;
}

#range-slider-example .range-slider__range {
    background: #201E50;
}

#range-slider-example .range-slider__thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

#range-slider-example .range-slider__thumb[data-lower] {
    background: #201E50;
}

#range-slider-example .range-slider__thumb[data-upper] {
    background: #201E50;
}

#range-slider-example .range-slider__thumb[data-lower][data-active] {
    animation: rotate-anti-clockwise .9s infinite;
}

#range-slider-example .range-slider__thumb[data-upper][data-active] {
    animation: rotate-clockwise .9s infinite;
}


/************************************************************************************/

#range-slider-date {
    height: 5px;
    background: #ccc;
}

#range-slider-date .range-slider__range {
    background: #201E50;
}

#range-slider-date .range-slider__thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

#range-slider-date .range-slider__thumb[data-lower] {
    background: #201E50;
}

#range-slider-date .range-slider__thumb[data-upper] {
    background: #201E50;
}

#range-slider-date .range-slider__thumb[data-lower][data-active] {
    animation: rotate-anti-clockwise .9s infinite;
}

#range-slider-date .range-slider__thumb[data-upper][data-active] {
    animation: rotate-clockwise .9s infinite;
}


/**********************************************************/

#range-slider-distance {
    height: 5px;
    background: #ccc;
}

#range-slider-distance .range-slider__range {
    background: #201E50;
}

#range-slider-distance .range-slider__thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

#range-slider-distance .range-slider__thumb[data-lower] {
    background: #201E50;
}

#range-slider-distance .range-slider__thumb[data-upper] {
    background: #201E50;
}

#range-slider-distance .range-slider__thumb[data-lower][data-active] {
    animation: rotate-anti-clockwise .9s infinite;
}

#range-slider-distance .range-slider__thumb[data-upper][data-active] {
    animation: rotate-clockwise .9s infinite;
}