Slider widget color change

Apps & Services HABPanel
,
1

I’m creating a total new habpanel for myself and decided into the CSS to custimize it to the max!

I’m using the slider widget and custimized it for the most part, but I can’t change the color of the widget. I read in another topic (4 years ago) that it should be possible but there where no examples there (Slider widget question

Below is my code. I tried several other methods (putting color on several places) but it doesn;t change, it uses my CSS sheet from habpanel, i could change that, but then every color changes in habpanel).

.slider {
  top: 90px;
  display: block;
  position: absolute;
  width: 500px;
  height: 15px;  
  margin-left: 100px;
  margin-top:-50px;
}
  
#volume {
  color: #00FF00;
  }


</style>



<div class="slider" ng-init='model={
                             "name": "volume", 
                             "item": "GlobalVolume", 
                             "floor": 0, 
                             "ceil": 0, 
                             "step":1, 
                             "unit": "%", 
                             "hidelabel":"true", 
                             "hidepointer":"true", 
                             "hidelimits":"true"}'>
  <widget-slider ng-model="model" id="volume"></widget-slider>
</div>

Can someone slide (point) me in the right direction?

2

I’m actually interested in modifying the slider widget also, how did you get the actual original code for the slider widget?

Best, Jay

3

Don’t know where I found this code but never managed to change the color.

I don’t use habpanel anymore but working with main ui from openhab 3.