nw-react-slider/dist/nw-react-slider.min.css

Slider Component

.slider-container-component{position:relative}.slider-container-component .slider{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);margin:6px 0}.slider-container-component .slider__track{position:relative;height:12px;cursor:pointer;background:-webkit-linear-gradient(left,#f660ff,#65bafa,#8fec51);background:linear-gradient(90deg,#f660ff,#65bafa,#8fec51);border-radius:6px;margin:6px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}.slider-container-component .slider__handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid #bcbcbc;height:24px;width:24px;border-radius:12px;background:#fff;cursor:pointer;box-shadow:0 1px 3px 0 rgba(0,0,0,.15);margin-top:-6px;display:inline-block;position:absolute;z-index:1;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.slider-container-component .slider__handle.react-draggable-dragging{-webkit-transition:none;transition:none}.slider-container-component .slider__markers,.slider-container-component .slider__ticks{position:absolute;width:100%;margin-top:1px;line-height:0;cursor:pointer;pointer-events:none}.slider-container-component .slider__markers{-webkit-transform:translateY(-24px);transform:translateY(-24px)}.slider-container-component .slider__tick{width:1px;background-color:rgba(0,0,0,.2);height:10px;display:inline-block;position:relative;margin-left:-1px;pointer-events:none}.slider-container-component .slider__tick--marker{margin-left:calc(50% - 1px);margin-top:8px}.slider-container-component .marker,.slider-container-component .slider__marker{display:inline-block;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:10px}.slider-container-component .marker__label{margin:0;line-height:1}.slider-container-component.dragging .popover-container>.popover{-webkit-transition:none;transition:none}.slider-container-component .popover-container{margin-top:12px}.slider-container-component .popover-container .popover{-webkit-transition:left .2s ease;transition:left .2s ease;background:#fff;border:1px solid #dcdcdc;box-shadow:0 1px 3px 0 rgba(0,0,0,.15);width:150px;left:-61px;-webkit-transform:translateX(calc(-50% + 14px));transform:translateX(calc(-50% + 14px));height:50px;padding:10px;font-size:14px;line-height:20px;color:#464646;text-align:center;border-radius:4px;cursor:auto;position:absolute}.slider-container-component .popover-container .popover__arrow{position:relative;background:#fff;height:6px;width:12px;top:-10px;margin-left:-6px;left:50%;border:none}.slider-container-component .popover-container .popover__arrow:after,.slider-container-component .popover-container .popover__arrow:before{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.slider-container-component .popover-container .popover__arrow:after{border-color:hsla(0,0%,100%,0);border-bottom-color:#fff;border-width:5px;margin-left:-5px;top:auto}.slider-container-component .popover-container .popover__arrow:before{border-color:hsla(0,0%,86%,0);border-bottom-color:#dcdcdc;border-width:6px;margin-left:-6px}