1

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

1 Answer 1

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .