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);
}
}