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


Forum Jump: