custom css inside widget (slider)

[cdebackere]

I'm trying to apply a custom css style I create for a horizontal slider (from other forum post) to an object on a widget.
But for some reason, the custom style has no effect on the object on the widget. The same style on the main page works as intended (with some specific tuning for touch and usermode)

Am I overlooking something? Or is it because the slider is on a widget and thus not using .slider / .progress?

[admin]

Post your code and screenshots of what is not working.

[cdebackere]

the page itself has the horizontal slider for volume object,
   
The object uses Custom CSS slider-alt : 

Code:

/*fancy minimalistic hor slider */
.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: 2px;
  box-shadow: none;
  background-color: #ccc;
}
.slider-alt .slider .slider-handle {
  background-clip: padding-box;
  background-color: #bbb;
  background-image: none;
  border-radius: 50%;
  border-color: #bbb;
  box-sizing: border-box;
  height: 12px;
  padding: 6px;
  width: 12px;
  margin-top: 6px;
  margin-left: -1px;
}
.touch .slider-alt .slider .slider-handle {
  margin-top: 3px;
}
.usermode .slider-alt .slider {
  width: 430px;
}
.slider-alt .slider .slider-handle:before {
  background: #106AC4;
  border-radius: 10%;
  content: ' ';
  height: 4px;
  left: -501px;
  pointer-events: none;
  position: absolute;
  top: 3px;
  width: 500px;
}
.slider-alt .slider-value span {
  border-radius: 0;
}

The widget now looks like :
   
, with the default slider on the volume icon/object on that widget
When specifying custom CSS slider-alt on that object, then nothing changes.

Ideally, i'd like to have a vertical slider, looking similar to the horizontal slider on the main page, but even a similar hor slider, with reduced length would be a good start.
I tried that by adding a new custom css slider-alt-short, and just updating the specified width, but again, no effect.
Would be nice to reuse the slider-alt, with a CSS statment like

Code:

.widget .slider-alt .slider {
  width: 100px;
}

I can dream right

[admin]

Your CSS code only affects inline controls. Additional classes are added to popover controls with pcontrol- prefix. Use inspect tool in your browser dev tools (F12) to check which classes are assigned to an element.

[cdebackere]

OK
I get it: all the (custom) css classes have 'pcontrol-' added in front of what is configured in the visu editor.
So i now added custom css slider which is in fact pcontrol-slider
When adding that style pcontrol-slider explicitely to the css styles, then it works indeed.

Code:

/*popover slider */
.pcontrol-slider .slider-min,
.pcontrol-slider .slider-max {
  display: none;
}
.pcontrol-slider .slider {
  width: 140px;
  overflow: hidden;
  padding: 13px 0;
}

   
Now it's just a matter of writing proper css to get the look I need

Thanks.

I

[cdebackere]

final result of the visu we automatically generate:

Thx for the support
C.