slider value CSS

[stigen]

Hi

Made my own vertical custom slider.

When i press the hanlde the value shows up in right corner away from the slider.

Is there any way i can move the value, so that it shows right under the slider?

   


Here is my CSS:


/*------------------------------------------*/
/* SLIDER-LIGHT */

.slider_light .slider-min,
.slider_light .slider-max{
display: none;
}

.slider_light .slider {
width: 5px;
height: 200px;
overflow: hidden;
border-radius: 0px;
}

.slider_light .slider .progress {
position: absolute;
height: 200px;
width: 5px;
margin: 0;
border: none;
border-radius: 0px;
box-shadow: none;
background-color: #000000;
}

.slider_light .slider .slider-handle {
background-clip: padding-box;
background-color: #fff;
background-image: none;
border-radius: 50%;
border-color: #000000;
box-sizing: border-box;
height: 24px;
padding: 0;
width: 24px;
  left: 5px;
}

.touch .slider_light .slider .slider-handle {
  margin-top: 3px;
}

.usermode .slider_light .slider {
  width: 250px;
}

.slider_light .slider .slider-handle:before {
background: #ffcc00;
content: '';
width: 5px;
height: 200px;
pointer-events: none;
position: absolute;
border: none;
  top: 23px;
border-radius: 0px;
  left: 9px;
}

.slider_light .slider-value span {
border-radius: 0;
}

[admin]

The value is position automatically on either top or bottom. In your case it's position incorrectly because of the slider width that should be much smaller (36px instead of 250px):

Code:

.usermode .slider_light .slider {
  width: 36px;
}

[stigen]

The value is position automatically on either top or bottom. In your case it's position incorrectly because of the slider width that should be much smaller (36px instead of 250px):

Code:

.usermode .slider_light .slider {
  width: 36px;
}

Thanks!
That did it