range-slider-input examples
1. default
JavaScript
rangeSlider(document.querySelector('#range-slider'))
CSS
/* Default Style */
2. disabled
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    disabled: true
})
CSS
/* Default Style */
3. range slide disabled
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    rangeSlideDisabled: true
})
CSS
/* Default Style */
4. thumbs disabled
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    thumbsDisabled: true
})
CSS
/* Default Style */
5. only upper thumb disabled
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    thumbsDisabled: [false, true]
})
CSS
/* Default Style */
6. as a single thumb slider (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    /* Set lower value to 0 */
    value: [0, 50],
    thumbsDisabled: [true, false],
    rangeSlideDisabled: true
})
CSS
#range-slider .range-slider__thumb[data-lower] {
    width: 0;
}

#range-slider .range-slider__range {
    border-radius: 6px;
}
7. vertical orientation (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    orientation: 'vertical'
})
CSS
#range-slider {
    margin: auto;
    height: 300px;
}
8. styled example 1 (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'))
CSS
#range-slider {
    background: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23555' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E") #333;
}

#range-slider .range-slider__range {
    background: #ffbf00;
    transition: height .3s;
}

#range-slider .range-slider__thumb {
    background: #faa307;
    transition: transform .3s;
}

#range-slider .range-slider__thumb[data-active] {
    transform: translate(-50%, -50%) scale(1.25);
}

#range-slider .range-slider__range[data-active] {
    height: 16px;
}
9. styled example 2 (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    step: 'any'
})
CSS
#range-slider {
    height: 16px;
    background: #4b4d61;
}

#range-slider .range-slider__range {
    background: #ff4141;
}

#range-slider .range-slider__thumb {
    width: 30px;
    height: 30px;
    border-radius: 4px;
}

#range-slider .range-slider__thumb[data-lower] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M3,5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5M11,7A2,2 0 0,0 9,9V17H11V13H13V17H15V9A2,2 0 0,0 13,7H11M11,9H13V11H11V9Z' /%3E%3C/svg%3E") #ff4141;
}

#range-slider .range-slider__thumb[data-upper] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M15,10.5V9A2,2 0 0,0 13,7H9V17H13A2,2 0 0,0 15,15V13.5C15,12.7 14.3,12 13.5,12C14.3,12 15,11.3 15,10.5M13,15H11V13H13V15M13,11H11V9H13V11Z' /%3E%3C/svg%3E") #ff4141;
}

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

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

@keyframes rotate-clockwise {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-anti-clockwise {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}
10. styled example 3 (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    step: 'any'
})
CSS
#range-slider {
    height: 60px;
    background: #333;
    overflow: hidden;
}

#range-slider .range-slider__thumb {
    width: 18px;
    height: 38px;
    border-radius: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23333' viewBox='0 0 24 24'%3E%3Cpath d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' /%3E%3C/svg%3E") #fff;
    background-repeat: no-repeat;
    background-position: center;
}

#range-slider .range-slider__range {
    border-radius: 6px;
    background: transparent;
    border: 4px solid #fff;
    box-sizing: border-box;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
}
11. styled example 4 (codepen)
JavaScript
rangeSlider(document.querySelector('#range-slider'), {
    step: 'any'
})
CSS
#range-slider {
    height: 24px;
    border-radius: 12px;
    background: #353644;
}

#range-slider .range-slider__thumb {
    border: 6px solid #fff;
    box-sizing: border-box;
}

#range-slider .range-slider__thumb[data-lower] {
    background: #0073e6;
}

#range-slider .range-slider__thumb[data-upper] {
    background: #ee2c2c;
}

#range-slider .range-slider__range {
    background: linear-gradient(to right, #0073e6, #ee2c2c);
    background-size: 200% 100%;
    background-position: 50% 0;
}

#range-slider .range-slider__range[data-active],
#range-slider .range-slider__thumb[data-active]~.range-slider__range {
    animation: move-bg .75s infinite linear;
}

@keyframes move-bg {
    0% {
        background-position: 50% 0;
    }

    25% {
        background-position: 100% 0;
    }

    50% {
        background-position: 50% 0;
    }

    75% {
        background-position: 0% 0;
    }

    100% {
        background-position: 50% 0;
    }
}