nw-react-slider--bki/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__markers--bottom{-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;margin-left:-1px;pointer-events:none;position:absolute}.slider-container-component .slider__tick--marker{margin-left:calc(50% - 1px);margin-top:8px}.slider-container-component .slider__fill{position:absolute;left:1px;top:1px;bottom:1px;right:1px;background-color:rgba(0,0,0,.2);border-radius:6px;-webkit-transition:right .2s ease-in-out;transition:right .2s ease-in-out}.slider-container-component .slider__ticks--circle .slider__tick{width:10px;background:#fff;border-radius:10px}.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:absolute;background:#fff;height:6px;width:12px;top:0;margin-left:0;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:relative;pointer-events:none}.slider-container-component .popover-container .popover__arrow:after{border-color:hsla(0,0%,100%,0);border-width:5px;margin-left:-5px;top:auto}.slider-container-component .popover-container .popover__arrow:before{border-color:hsla(0,0%,86%,0);border-width:6px;margin-left:-6px}.slider-container-component .popover-container--arrow-bottom .popover__arrow:after{border-bottom-color:#fff;top:-23px;left:3px}.slider-container-component .popover-container--arrow-bottom .popover__arrow:before{top:-24px;left:9px;border-bottom-color:#dcdcdc}.slider-container-component .popover-container--arrow-top .popover{bottom:30px}.slider-container-component .popover-container--arrow-top .popover__arrow{top:auto;bottom:-16px;margin-left:3px}.slider-container-component .popover-container--arrow-top .popover__arrow:after{top:-7px;left:0;border-top-color:#fff}.slider-container-component .popover-container--arrow-top .popover__arrow:before{top:-6px;border-top-color:#dcdcdc}