Customize Slider

[admin]

Post full CSS for your slider.

[adiaz]

/*------------------------------------------*/
/* 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;
}

[admin]

You need to set border-radius of the outer element:

Code:

.cl_out .slider {
width: 20px;
height: 100px;
overflow: hidden;
border-radius: 20px;
}

[adiaz]

Oh!

My fail, thanks!

Working.

[davidchispas]

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.

[admin]

2020 RC firmware has an option for control element scaling in vis. parameters

[davidchispas]

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?

   

   

[admin]

Scaling should work without any additional CSS. Can you provide a backup so we can text locally why scaling is not working for you?

[sim1us]

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.

[admin]

Go to Objects > Vis. parameters and enable Vertical slider mode.

[sim1us]

Go to Objects > Vis. parameters and enable Vertical slider mode.

haha now that was embarassingly easy   thank you

[JMemphix]

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: 16)

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

  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.

[admin]

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.