Logic Machine Forum
Customize Slider - Printable Version

+- 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

Customize Slider - hima - 19.11.2016

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.

RE: Customize Slider - admin - 21.11.2016

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


RE: Customize Slider - admin - 22.11.2016

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

RE: Customize Slider - hima - 23.11.2016

(22.11.2016, 12:25)admin Wrote: 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.

RE: Customize Slider - baggins - 15.01.2017

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.

RE: Customize Slider - admin - 16.01.2017

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.

RE: Customize Slider - Erwin van der Zwart - 16.01.2017

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

RE: Customize Slider - baggins - 16.01.2017

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.

RE: Customize Slider - Erwin van der Zwart - 16.01.2017

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

RE: Customize Slider - baggins - 16.01.2017

That works.

Many thanks for your support!

RE: Customize Slider - baggins - 01.02.2017

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.

RE: Customize Slider - admin - 01.02.2017

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

RE: Customize Slider - josep - 28.02.2017

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

RE: Customize Slider - Thomas - 11.03.2017

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?

RE: Customize Slider - admin - 03.12.2019

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


RE: Customize Slider - toujour - 21.04.2020

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

RE: Customize Slider - admin - 21.04.2020

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


RE: Customize Slider - toujour - 21.04.2020

thanks....now I understand more things..... Big Grin 

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

Other questions ( I hope without javascript Sad  ):
- 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) ?

RE: Customize Slider - admin - 21.04.2020

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

RE: Customize Slider - adiaz - 11.05.2020

Hello,

I have problems with Slider.

   

Bottom border not showing rounded borders.

Any way to correct this? 

Thanks