+- 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: Customize Slider (/showthread.php?tid=467)
Pages:
1
2
RE: Customize Slider - admin - 11.05.2020
Post full CSS for your slider.
RE: Customize Slider - adiaz - 11.05.2020
/*------------------------------------------*/
/* SLIDER */
/*------------------------------------------*/
.cl_out .slider {
width: 20px;
height: 100px;
overflow: hidden;
}
.cl_out .slider-min {
display: none;
}
.cl_out .slider-max {
display: none;
}
.cl_out .slider .progress {
position: static;
height: 100px;
width: 20px;
margin: 0;
border: none;
border-radius: 20px;
box-shadow: none;
background-color: #ccc;
}
.cl_out .slider .slider-handle {
background-clip: padding-box;
background-color: #fff;
background-image: none;
border: none;
border-radius: 50%;
border-color: #bbb;
box-sizing: border-box;
height: 0px;
padding: 0;
width: 0px;
}
.cl_out .slider .slider-handle:before {
background: blue;
content: '';
pointer-events: none;
position: absolute;
border: none;
border-radius: 20px;
width: 20px;
height: 100px;
}
.cl_out .slider .btn {
left: 0px;
}
.cl_out .slider-value span {
border-radius: 0;
}
RE: Customize Slider - admin - 11.05.2020
You need to set border-radius of the outer element:
Code:
.cl_out .slider {
width: 20px;
height: 100px;
overflow: hidden;
border-radius: 20px;
}RE: Customize Slider - adiaz - 11.05.2020
Oh!
My fail, thanks!
Working.
RE: Customize Slider - davidchispas - 31.10.2020
(21.11.2016, 08:29)admin Wrote: Customized slider example. This won't be visible in the editor, only in the user Visualization.Hello, I want to proportionally increase the entire size of the slider. What parameters do I have to change? I have tried to change several and the circle appears cut.
Set Additional classes to slider-alt and enable Show control. Add to Custom CSS:
Code:.slider-alt .slider-min,
.slider-alt .slider-max {
display: none;
}
.slider-alt .slider {
overflow: hidden;
padding: 13px 0;
}
.slider-alt .slider .progress {
height: 4px;
margin: 0;
border: none;
border-radius: 0;
box-shadow: none;
background-color: #ccc;
}
.slider-alt .slider .slider-handle {
background-clip: padding-box;
background-color: #fff;
background-image: none;
border-radius: 50%;
border-color: #bbb;
box-sizing: border-box;
height: 24px;
padding: 0;
width: 24px;
}
.touch .slider-alt .slider .slider-handle {
margin-top: 3px;
}
.usermode .slider-alt .slider {
width: 250px;
}
.slider-alt .slider .slider-handle:before {
background: #5bb75b;
content: ' ';
height: 4px;
left: -301px;
pointer-events: none;
position: absolute;
top: 9px;
width: 300px;
}
.slider-alt .slider-value span {
border-radius: 0;
}
RE: Customize Slider - admin - 31.10.2020
2020 RC firmware has an option for control element scaling in vis. parameters
RE: Customize Slider - davidchispas - 02.11.2020
[attachment=1871 Wrote:admin pid='18962' dateline='1604151170']2020 RC firmware has an option for control element scaling in vis. parametersHello Admin, I have increased the size to 150% and in the Visualization configuration page it is enlarged (image 1) but in the visualization it does not increase.
Then, if I add a custom css, wouldn't I have to change any lines for this to happen?
RE: Customize Slider - admin - 02.11.2020
Scaling should work without any additional CSS. Can you provide a backup so we can text locally why scaling is not working for you?
RE: Customize Slider - sim1us - 04.02.2022
I cant for the life of me get the vertical slider to work.
Tried adiaz's custom css slider and admin's with no luck
Closest I have come is with the line is verticalbut i can only slide horizontal .
Can anyone be so kinde and post a custom css of admin's slider with vertical slider?
Much appreciated.
RE: Customize Slider - admin - 07.02.2022
Go to Objects > Vis. parameters and enable Vertical slider mode.
RE: Customize Slider - sim1us - 12.02.2022
(07.02.2022, 08:52)admin Wrote: Go to Objects > Vis. parameters and enable Vertical slider mode.
haha now that was embarassingly easy
thank you