+- 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
RE: Customize Slider - JMemphix - 31.08.2024
Hopefully asking on this thread is best...
I'm wanting to create a very basic slider with an ON/OFF button shape to the right of the slider, and hoping I don't have to create a separate ON/OFF button each time.
Trying to create it for the "PC/Tablet Visualization" GUI.
I've attached what I'm hoping to achieve, even if it requires 11 images (0% Off, 10% On, 20% On, through to 100% On).
Forum_Example_Pic_Off.svg (Size: 1.35 KB / Downloads: 19)
Forum_Example_Pic_On_10.svg (Size: 1.35 KB / Downloads: 13)
Forum_Example_Pic_On_100.svg (Size: 1.35 KB / Downloads: 9)Is it possible to use multiple images for the look of the slider including when controlling it?
Currently I have the Object with 11 Additional icons which gives me the look for status, but has the pop-up control with CSS slider.
Also, is there an easy way to copy an object with 11 additional icons to another existing page? I understand I could duplicate a page and copy that way, but what about a page thats already half setup or existing. Perhaps this question will be obsolete with after the first question.
RE: Customize Slider - admin - 02.09.2024
The only way to add an on/off button is to create a separate object element.
Slider can be customized via CSS but you cannot use images for this. You can place it directly into the plan by enabling the "Show control" option.
Duplicate/copy/paste buttons can be found in the bottom right of the editor window. You can duplicate an element and then change the group addresses while keeping the additional icons.