+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: slider value CSS (/showthread.php?tid=3942)
slider value CSS - stigen - 22.03.2022
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;
}
RE: slider value CSS - admin - 22.03.2022
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;
}RE: slider value CSS - stigen - 22.03.2022
(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
