@spreadtheweb/multi-range-slider
Version:
Simple, small and fast vanilla JavaScript multi range slider without dependencies, with ability to have multiple values and points to slide
1 lines • 894 B
CSS
.range-slider__container{margin-bottom:100px;position:relative}.range-slider__container span{display:inline-block}.range-slider__rail{left:0;width:100%}.range-slider__rail,.range-slider__track{cursor:pointer;position:absolute;transform:translateY(-50%)}.range-slider__point{border-radius:50%;cursor:pointer;position:absolute;top:0;transform:translateX(-50%);transition:box-shadow .15s}.range-slider__container .range-slider__tooltip{background-color:gray;border-radius:3px;color:#fff;font-size:16px;left:0;min-width:30px;padding:.3em .6em;position:absolute;text-align:center;top:-100%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms;user-select:none}.range-slider__container .range-slider__tooltip:after{background-color:gray;bottom:-5px;content:"";height:1em;left:50%;position:absolute;transform:translate(-50%) rotate(45deg);width:1em;z-index:-1}