Customize Slider

[hima]

Hi I wish to use slider for dimmer in my LM4 but I want to change the way it looks. Can anybody help me and let me know if this has been done earlier.

[admin]

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

[admin]

As for you task, can you provide a sample image of what kind of control you want to create?

[hima]

As for you task, can you provide a sample image of what kind of control you want to create?

I wish to create a slider like the one attached.

[baggins]

Hi,

I tried the example that admin provided but ran into some unexpected behaviour.

I've added the css script to Custom css, added slider-alt to additional classes and enabled Show Control.

In User Visualisation the new slider appears instead of the icon that I have assigned to the object, so the slider is there permanently. If I disable Show Control, then the icon is shown and after I click on the icon, a slider appears. However this is the default slider.

I would like to have the icon to be shown and when clicked, the modified slider to appear.


What needs to be done to obtain this?

Thanks.

[admin]

Controls in popup elements are shared between all icons so it's not possible to apply custom classes to them. The only way for it to work is to override all sliders with custom CSS.

[Erwin van der Zwart]

Hi,

What you also can do is create a widget with the slider-alt and open the widget with a button, this way you can have same effect on single button, but you have to set all locations of the widget by hand to make them open on your wanted position.

BR,

Erwin

[baggins]

Thanks for the tip Erwin.

I now created a widget with the slider on it.
However in Usermode visualization the slider is shown above the widget (see attached image).

I tried changing several parameters in the css without good result.
What parameters do I have to change in the css for the slider to appear inside the widget?

Thanks.

[Erwin van der Zwart]

Hi,

Try to re-position it with: (my test widget was 302x44 like original slider size)

Code:

.slider-alt {
  margin-left: 20px;
  margin-top: 6px;
}

BR,

Erwin

[baggins]

That works.

Many thanks for your support!

[baggins]

Hi,

With you guys help I have now succeeded to implement almost what I would like, apart from one thing: I would like to have the slider to have rounded corners at the ends.
I managed to get a rounded edge at the right side, but no matter what I try I can't get the left side rounded (see attached image).

How do I round the left side of the slider?

Thanks.

[admin]

The problem is that active slider background overflows to the left so even if you set border radius it won't show.

[josep]

Hi,

How can I put the slider-alt of the example in vertical position? I try to select this in a object properties but it doesn't appear properly...

THX

[Thomas]

Hi
I am wondering. The thing I'm really missing is a thermometer with old-style thermometer look. Would it be possible to modify slider for this purpose? I mean rounded boxing, gray background and blue mercury inside? Optionaly with a scale?

[admin]

CSS for custom vertical slider:

Code:

.usermode .slider-alt .slider-v .slider,
.slider-alt .slider-v .slider .progress {
  height: 250px;
  width: 4px;
}
.slider-alt .slider-v .slider .progress {
  position: static;
}
.slider-alt .slider-v .slider {
  padding: 0 13px;
}
.slider-alt .slider-v .btn {
  left: 3px;
}
.slider-alt .slider-v .slider .slider-handle:before {
  width: 4px;
  left: 9px;
  top: 22px;
  height: 300px;
}

[toujour]

Hi,
I'm working with your last CSS.

I'd like change this point (width of the button and position of the text over the button), can you help me ?



BR,
Alberto

[admin]

Width of the buttons can be changed by adjust left/right padding. Icon will be centered if left/right padding is the same.

Code:

.slider-alt .slider-v .slider-max,
.slider-alt .slider-v .slider-min {
  padding-left: 10px;
  padding-right: 10px;
}

In case you need to change vertical spacing.

Code:

.slider-alt .slider-v .slider-max,
.slider-alt .slider-v .slider-min {
  padding-top: 5px;
  padding-bottom: 5px;
  height: auto;
}

You will probably need to adjust slider handle element as well. Here width is set directly.

Code:

.slider-alt .slider-v .slider-handle {
  width: 24px;
}

[toujour]

thanks....now I understand more things.....  

This is my new range-slider (it is not perfect....but I can do it better next time!! )

Other questions ( I hope without javascript   ):
- is it possible put the value of the object over the handle ?
- it is possible to color the slider only under the handle (from bottom to top) ?

[admin]

This is not possible with CSS, only with Custom JS.

[adiaz]

Hello,

I have problems with Slider.

   

Bottom border not showing rounded borders.

Any way to correct this? 

Thanks