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.

Customize Slider
#21
Post full CSS for your slider.
Reply
#22
/*------------------------------------------*/
/* 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;
}
Reply
#23
You need to set border-radius of the outer element:
Code:
.cl_out .slider {
width: 20px;
height: 100px;
overflow: hidden;
border-radius: 20px;
}
Reply
#24
Oh!

My fail, thanks!

Working.
Reply
#25
(21.11.2016, 08:29)admin Wrote: Customized slider example. This won't be visible in the editor, only in the user Visualization.
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;
}
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.
Reply
#26
2020 RC firmware has an option for control element scaling in vis. parameters
Reply
#27
[attachment=1871 Wrote:admin pid='18962' dateline='1604151170']2020 RC firmware has an option for control element scaling in vis. parameters
Hello 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?

   

   
Reply
#28
Scaling should work without any additional CSS. Can you provide a backup so we can text locally why scaling is not working for you?
Reply
#29
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.
Reply
#30
Go to Objects > Vis. parameters and enable Vertical slider mode.
Reply
#31
(07.02.2022, 08:52)admin Wrote: Go to Objects > Vis. parameters and enable Vertical slider mode.

haha now that was embarassingly easy  Rolleyes thank you
Reply
#32
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).
.svg   Forum_Example_Pic_Off.svg (Size: 1.35 KB / Downloads: 17)

.svg   Forum_Example_Pic_On_10.svg (Size: 1.35 KB / Downloads: 11)

.svg   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.
Reply
#33
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.
Reply


Forum Jump: