.rangeslider {
  position: relative;
  width: 100%;
  height: 100%;
  font-size:13px;
  line-height: 15px;  
}
.rangeslider *::before,
.rangeslider *::after {
  box-sizing: border-box;
}
.rangeslider__tip-min {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  position: absolute;
  top: 0px;
  left: 0px;
  color: white;
  padding: 0px 3px;
  border-radius: 3px;
}
.rangeslider__tip {
  background: green;
}
.rangeslider__tip-from {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 123px;
  color: white;
  padding: 0px 3px;
  border-radius: 3px;
  white-space: nowrap;
}
.rangeslider__tip-to {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0px;
  left: 224px;
  color: white;
  padding: 0px 3px;
  border-radius: 3px;
  white-space: nowrap;
}
.rangeslider__tip-max {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  position: absolute;
  top: 0px;
  right: 0px;
  color: white;
  padding: 0px 3px;
  border-radius: 3px;
}
.rangeslider__line {
  border: 1px solid gray;
  border-radius: 5px;
  position: absolute;
  left: 0px;
  top: 24px;
  width: 100%;
  height: 100%;
  height: 6px;
  z-index: 10;
}
.rangeslider__line:hover {
  border-color: black;
}
.rangeslider__line-selected {
  background: green;
  position: absolute;
  left: 140px;
  top: 25px;
  width: 84px;
  height: 6px;
}
.rangeslider__handle-from {
  cursor: pointer;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 123px;
  top: 19px;
  z-index: 11;
}
.rangeslider__handle-to {
  cursor: pointer;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  position: absolute;
  width: 16px;
  height: 16px;
  left: 224px;
  top: 19px;
  z-index: 11;
}
.rangeslider__handle {
  background: green;
}
.rangeslider__handle:hover:not(.rangeslider__handle_isMoving) {
  background: white;
  border-color: green;
}
.rangeslider__handle_isMoving {
  background: green;
  border-color: white;
  border-width: 1px;
}
.rangeslider__thinline {
  position: absolute;
  width: 1px;
  border-left: 1px solid blue;
  height: 65%;
  top: 0;
  left: 50px;
  z-index: 999;
  cursor: pointer;
}
.rangeslider__thinline-half {
  position: absolute;
  width: 1px;
  border-left: 1px solid orange;
  height: 63%;
  top: 0;
  left: 50px;
  z-index: 999;
  cursor: pointer;
}
.rangeslider__thinline:hover {
  border-left: 1px dashed blue;
}
.rangeslider__thinline-half:hover {
  border-left: 1px dashed orange;
}
.rangeslider_one-handle .rangeslider__line-selected {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  left: 0;
}
.rangeslider_one-handle .rangeslider__tip-from,
.rangeslider_one-handle .rangeslider__handle-from {
  display: none;
}
.rangeslider.rangeslider_is-vertical.rangeslider_one-handle .rangeslider__line-selected {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 0px;
  top: 0;
}
.rangeslider.rangeslider_is-vertical .rangeslider__tip-min,
.rangeslider.rangeslider_is-vertical .rangeslider__tip-max,
.rangeslider.rangeslider_is-vertical .rangeslider__tip-from,
.rangeslider.rangeslider_is-vertical .rangeslider__tip-to {
  left: 20px;
}
.rangeslider.rangeslider_is-vertical .rangeslider__tip-max {
  bottom: 0px;
  top: auto;
  right: auto;
}
.rangeslider.rangeslider_is-vertical .rangeslider__handle-from,
.rangeslider.rangeslider_is-vertical .rangeslider__handle-to {
  left: 0px;
}
.rangeslider.rangeslider_is-vertical .rangeslider__line {
  top: 0px;
  left: 5px;
  height: 100%;
  width: 6px;
}
.rangeslider.rangeslider_is-vertical .rangeslider__line-selected {
  left: 6px;
  width: 4px;
  height: 84px;
}