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
#1
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.
Regards
Hima
Reply
#2
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;
}
Reply
#3
As for you task, can you provide a sample image of what kind of control you want to create?
Reply
#4
(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.

Attached Files Thumbnail(s)
   
Regards
Hima
Reply
#5
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.
Reply
#6
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.
Reply
#7
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
Reply
#8
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.

Attached Files Thumbnail(s)
   
Reply
#9
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
Reply
#10
That works.

Many thanks for your support!
Reply
#11
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.

Attached Files Thumbnail(s)
   
Reply
#12
The problem is that active slider background overflows to the left so even if you set border radius it won't show.
Reply
#13
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
Reply
#14
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?
LM5Lp, firmware: 2018.08.22 and 2021.12.15, FlashSYS v2, ARMv7 Processor rev 5 (v7l), kernel 4.4.151 and 4.4.259
Reply
#15
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;
}
Reply
#16
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

Attached Files Thumbnail(s)
   
KNX Advanced Partner + Tutor
Reply
#17
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;
}
Reply
#18
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) ?

Attached Files Thumbnail(s)
   
KNX Advanced Partner + Tutor
Reply
#19
This is not possible with CSS, only with Custom JS.
Reply
#20
Hello,

I have problems with Slider.

   

Bottom border not showing rounded borders.

Any way to correct this? 

Thanks
Reply


Forum Jump: