custom css inside widget (slider)

[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