input[type="range"]{
-webkit-appearance: none;
background: transparent;
cursor: pointer;
outline:none;
}
.v-range::-webkit-slider-runnable-track {
background-color: #fff;
border: 1px solid #008080;
width:6px;
}
.v-range::-moz-range-track {
background-color: #fff;
border: 1px solid #008080;
width:5px;
}
.v-range::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
background: linear-gradient(#00AACC, #fff, #008080);
border: 1px solid #008080;
border-radius: 3px;
height: 14px;
width: 28px;
cursor: pointer;
margin-left: -12px;
}
.v-range::-moz-range-thumb {
background:#fff;
background: linear-gradient(#00AACC, #fff, #008080);
border: 1px solid #008080;
border-radius: 3px;
height: 14px;
width: 28px;
cursor: pointer;
}
.v-range {
  width: 48px;
  height:260px;
}
.v-range[orient=vertical] {
  writing-mode: vertical-lr;
  direction: rtl;
}
.v-range:not([orient=vertical]) {
  writing-mode: vertical-lr;
  direction: rtl;
}

.h-range::-webkit-slider-runnable-track {
background-color: #008080;
/* border: 1px solid #008080; */
height:4px;
width:130px;
}

.h-range::-moz-range-track {
background-color: #008080;
/* border: 1px solid #008080; */
height:4px;
width:140px;
}

.h-range::-webkit-slider-thumb {
-webkit-appearance: none;
background: #008080;
/* border: 1px solid #008080; */
border-radius: 3px;
height: 24px;
width: 12px;
cursor: pointer;
margin-top: -10px;
}

.h-range::-moz-range-thumb {
background: #008080;
/* border: 1px solid #008080; */
border-radius: 3px;
height: 24px;
width: 10px;
cursor: pointer;
}
.h-range {
  width: 150px;
  height:22px;
  margin-top:5px;
}

.h-range[orient=horizontal] {
  appearance: slider-horizontal;
}