Unable to use CSS extensions for styling same UI component type multiple ways

UI Builder
1

Hello, I am reposting this unanswered questions with a little more information.

I have a need to remove the rail visually on some slider components and not others.

I can accomplish hiding all rails using:

.bl-slider-rail .levelSlider  {
    opacity: 0;
  }

 .bl-slider-track {
    opacity: 0;
  }

I copied the relevant section of a rendered web page of the slider spans, in case it is useful. I put it at the end of this post.

I try to only affect some sliders and not other with the following extension, but cannot get it to apply:

 .bl-slider-rail .levelSlider  {
    opacity: 0;
  }

 .bl-slider-track .levelSlider {
    opacity: 0;
  }

image
was one attempt, and another:
image

and:
image

Here is the slider with the two relevant internal spans:

<span class="MuiSlider-root bl-slider MuiSlider-colorPrimary MuiSlider-vertical bl-slider--vertical" style="margin: 5px 5px 1px; font-size: 0.75rem; position: absolute; z-index: 30; align-self: center; height: 93.8px;">

Here are the relevant spans inside the above:

  <span class="MuiSlider-rail bl-slider-rail"></span>
  <span class="MuiSlider-track bl-slider-track" style="bottom: 0%; height: 66%;"></span>```

 

Thanks
3

Hi @Owen_Fowler,

Please try this option:

 .levelSlider {
  .bl-slider-rail {
    opacity: 0;
  }

 .bl-slider-track {
    opacity: 0;
  }
 }

.bl-slider-rail and .bl-slider-track should be inside the class which you added. The second variant of adding the class was correct:
image

Regards,
Marina

4

Works like a charm Marina, thanks for the help.

(PS. I realize now this was more a CSS question than a Backendless, thanks for your time.)