Hiding the slds-slider-label__range on the lightning-slider

Question

Got a number of LWC lightning-slider components. I want to hide the range label (span with class slds-slider-label__range). This won't work because of the shadow DOM...

<div class="range-hidden">
  <lightning-slider label="Risk of breach" value={pain1} min="0" max="5"></lightning-slider>
  <lightning-slider label="Productivity" value={pain2} min="0" max="5"></lightning-slider>
</div>

.range-hidden .slds-slider-label__range {
  display: none!important;
}

Looked for a styling hook but did not see one for the label range. The variant for label-hidden only hides the label and not the range label (sigh).

Problem Solved

Following Anton's guidance below (thanks Anton), I created a file called /force-app/main/default/staticresources/sliders.css with the CSS content above. Then I created a file in the same directory called sliders.resource-meta.xml with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<StaticResource xmlns="https://soap.sforce.com/2006/04/metadata">
  <contentType>text/css</contentType>
</StaticResource>

Then, I modified the Javascript for the component to:

import { LightningElement } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import sliders from '@salesforce/resourceUrl/sliders';

export default class Discovery extends LightningElement {
  async connectedCallback() {
    await loadStyle(this, sliders); 
  }
}

Answer 1

Because of the shadow dom in LWC, you can't pass CSS into child web components, such as the lightning-slider in your case.

CSS styles defined in a parent component don’t leak into a child.

I checked the SLDS reference of the component, indeed I don't see any useful styling hooks.

You could try to override the styling using static resource with the CSS file that contains override from your question:

.range-hidden .slds-slider-label__range {
  display: none!important;
}

Then load it into your component. This will add your css file to the page itself, so all components can inherit the styling from it.