r-range-slider/index.css

all in one range slider, single range , double range , multi range

.r-range-slider{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  padding:6px;
  cursor:pointer;
  height:50px;
}
.r-range-slider.horizontal{
  width:100%;
  
}
.r-range-slider.vertical{
  height:150px;
  width:50px;
}
.r-range-slider-line{
  position:relative;
  background:#ddd;
  z-index:10;
}
.r-range-slider.horizontal .r-range-slider-line{
  height:2px;
  width:100%;
}
.r-range-slider.vertical .r-range-slider-line{
  height:100%;
  width:3px;
}
.r-range-slider-point-container{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}
.r-range-slider-point{
  position:absolute;
  width:12px;
  height:12px;
  background:dodgerblue;
  border-radius:100%;
}
.r-range-slider-value{
  position:absolute;
  white-space:nowrap;
  font-size:11px;
  top:-26px;
  background:dodgerblue;
  color:#fff;
  padding:1px 4px;
  border-radius:3px;
}
.r-range-slider-fill-container{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:10;
}
.r-range-slider.horizontal .r-range-slider-fill-container{
  height:100%;
}
.r-range-slider.vertical .r-range-slider-fill-container{
  width:100%;
}
.r-range-slider-fill{
  position:absolute;
  
}
.r-range-slider.horizontal .r-range-slider-fill{
  width:100%;
  height:2px;
}
.r-range-slider.vertical .r-range-slider-fill{
  width:2px;
  height:100%;
}
.r-range-slider-label{
  position:absolute;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  width:0;
  height:0;
  font-size:10px;
  white-space:nowrap;
  z-index:100;
  
}

.r-range-slider.horizontal .r-range-slider-label{
  top:34px;
}
.r-range-slider.vertical .r-range-slider-label{
  left:34px;
}
.r-range-slider-scale{
  position:absolute;
  background:#ddd;
}
.r-range-slider.horizontal .r-range-slider-scale{
  height:10px;
  width:1px;
}
.r-range-slider.vertical .r-range-slider-scale{
  width:10px;
  height:1px;
}