fixes #916

docs/resources/changelog.md

@@ -28,6 +28,7 @@ This release removes the `<sl-responsive-media>` component. When this component
 - Fixed a bug in `<sl-textarea>` that prevented the textarea from resizing automatically when setting the value programmatically [#912](https://github.com/shoelace-style/shoelace/discussions/912)
 - Fixed a handful of paths to prevent TypeScript from getting upset [#886](https://github.com/shoelace-style/shoelace/issues/886)
 - Fixed a bug in `<sl-radio-group>` where the `button-group__base` part was documented but not exposed [#909](https://github.com/shoelace-style/shoelace/discussions/909)
+- Fixed a bug in `<sl-range>` that caused the active track color to render on the wrong side in RTL [#916](https://github.com/shoelace-style/shoelace/issues/916)
 - Refactored the internal event emitter to be part of `ShoelaceElement` to reduce imports and improve DX
 - Upgraded the status of `<sl-animated-image>`, `<sl-popup>`, and `<sl-split-panel>` from experimental to stable
 

src/components/range/range.styles.ts

@@ -43,6 +43,18 @@ export default css`
     );
   }
 
+  .range--rtl .range__control {
+    background-image: linear-gradient(
+      to left,
+      var(--track-color-inactive) 0%,
+      var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) min(var(--percent), var(--track-active-offset)),
+      var(--track-color-active) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
+      var(--track-color-inactive) 100%
+    );
+  }
+
   /* Webkit */
   .range__control::-webkit-slider-runnable-track {
     width: 100%;

src/components/range/range.ts

@@ -247,6 +247,7 @@ export default class SlRange extends ShoelaceElement {
               range: true,
               'range--disabled': this.disabled,
               'range--focused': this.hasFocus,
+              'range--rtl': this.localize.dir() === 'rtl',
               'range--tooltip-visible': this.hasTooltip,
               'range--tooltip-top': this.tooltip === 'top',
               'range--tooltip-bottom': this.tooltip === 'bottom'