This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

slider value CSS
#1
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;
}
Reply
#2
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;
}
Reply
#3
(22.03.2022, 09:48)admin Wrote: 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  Smile
Reply


Forum Jump: