feat(RangeSlider): allow to disable track filling; improve tooltips position handling

Author: mrholek

docs/content/forms/range-slider.md

@@ -40,8 +40,8 @@ Create a simple range slider with default settings.
 Enable multiple handles to allow the selection of a range or/and multiple values.
 
 {{< example >}}
-<div data-coreui-toggle="range-slider" data-coreui-value="20,40"></div>
-<div data-coreui-toggle="range-slider" data-coreui-value="20,40,60"></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-value="20,40"></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-value="20,40,60"></div>
 <div data-coreui-toggle="range-slider" data-coreui-value="20,40,60,80"></div>
 {{< /example >}}
 
@@ -51,8 +51,9 @@ Rotate the slider to a vertical orientation.
 
 {{< example >}}
 <div class="d-flex">
-  <div data-coreui-toggle="range-slider" data-coreui-value="20" data-coreui-vertical="true"></div>
-  <div data-coreui-toggle="range-slider" data-coreui-value="20,80" data-coreui-vertical="true"></div>
+  <div class="me-3" data-coreui-toggle="range-slider" data-coreui-value="20" data-coreui-vertical="true"></div>
+  <div class="me-3" data-coreui-toggle="range-slider" data-coreui-value="20,80" data-coreui-vertical="true"></div>
+  <div data-coreui-toggle="range-slider" data-coreui-value="20,80,100" data-coreui-vertical="true"></div>
 </div>
 {{< /example >}}
 
@@ -61,7 +62,7 @@ Rotate the slider to a vertical orientation.
 Disable the slider to prevent user interaction.
 
 {{< example >}}
-<div data-coreui-toggle="range-slider" data-coreui-value="50" data-coreui-disabled="true"></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-value="50" data-coreui-disabled="true"></div>
 <div data-coreui-toggle="range-slider" data-coreui-value="50, 75" data-coreui-disabled="true"></div>
 {{< /example >}}
 
@@ -70,7 +71,7 @@ Disable the slider to prevent user interaction.
 Range Slider has implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
 {{< example >}}
-<div data-coreui-toggle="range-slider" data-coreui-min="-50" data-coreui-max="150" data-coreui-value="50"></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-min="-50" data-coreui-max="150" data-coreui-value="50"></div>
 <div data-coreui-toggle="range-slider" data-coreui-min="-50" data-coreui-max="150" data-coreui-value="50, 75"></div>
 {{< /example >}}
 
@@ -79,7 +80,7 @@ Range Slider has implicit values for `min` and `max`—`0` and `100`, respective
 Range Slider inputs automatically "snap" to whole numbers. To modify this behavior, set a `step` value. In the example below, we increase the number of steps by specifying `step="0.25"`.
 
 {{< example >}}
-<div data-coreui-toggle="range-slider" data-coreui-step="0.25" data-coreui-value="50" ></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-step="0.25" data-coreui-value="50" ></div>
 <div data-coreui-toggle="range-slider" data-coreui-step="0.25" data-coreui-value="50, 75"></div>
 {{< /example >}}
 
@@ -135,6 +136,20 @@ Customize the content of tooltips using the `tooltipsFormat` option. This can be
 
 {{< js-docs name="range-slider-custom-tooltips" file="docs/assets/js/snippets.js" >}}
 
+## Track
+
+The `data-coreui-track` option allows you to customize how the slider's track is displayed. By default, the `data-coreui-track` option is set to `'fill'` enabling dynamic filling of the track based on the slider's current value(s). This means the filled portion of the track will adjust automatically as the slider handle(s) move, offering a responsive visual representation of the selected range.
+
+### Disable filling
+
+If you set `data-coreui-track` to `false`, the slider's track will not display any fill. Only the default track background will be visible, which can be useful for minimalist designs or when you use more then two handles.
+
+{{< example >}}
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-track="false" data-coreui-value="50" ></div>
+<div class="mb-3" data-coreui-toggle="range-slider" data-coreui-track="false" data-coreui-value="50, 75"></div>
+<div data-coreui-toggle="range-slider" data-coreui-track="false" data-coreui-value="25, 50, 75"></div>
+{{< /example >}}
+
 ## Usage
 
 ### Via data attributes
@@ -191,6 +206,7 @@ const rangeSlider = new RangeSlider(rangeSliderElement, {
 | `step` | number, string | `1` | Specifies the increment step for slider values. |
 | `tooltips` | boolean | `true` | Enables or disables tooltips that display current slider values. |
 | `tooltipsFormat` | function, null | `null` | Provides a custom formatting function for tooltip values. |
+| `track` | boolean, 'fill' | `'fill'` | Controls the visual representation of the slider's track. When set to `'fill'`, the track is dynamically filled based on the slider's value(s). Setting it to `false` disables the filled track. |
 | `value` | array, number | `0` | Sets the initial value(s) of the slider. |
 | `vertical` | boolean | `false` | Rotates the slider to a vertical orientation. |
 {{< /bs-table >}}
@@ -222,6 +238,18 @@ myRangeSlider.addEventListener('change.coreui.range-slider', event => {
 })
 ```
 
+## Accessibility
+
+The Range Slider component is built with accessibility in mind. Each slider handle includes the following ARIA attributes:
+
+- `role="slider"`
+- `aria-valuemin`: Minimum value
+- `aria-valuemax`: Maximum value
+- `aria-valuenow`: Current value
+- `aria-orientation`: horizontal or vertical
+
+Additionally, ensure that labels and tooltips are clear and descriptive to provide the best experience for all users.
+
 ## Customizing
 
 ### CSS variables

js/src/range-slider.js

@@ -58,6 +58,7 @@ const Default = {
   step: 1,
   tooltips: true,
   tooltipsFormat: null,
+  track: 'fill',
   value: 0,
   vertical: false
 }
@@ -73,6 +74,7 @@ const DefaultType = {
   step: '(number|string)',
   tooltips: 'boolean',
   tooltipsFormat: '(function|null)',
+  track: '(boolean|string)',
   value: '(array|number)',
   vertical: 'boolean'
 }
@@ -86,12 +88,14 @@ class RangeSlider extends BaseComponent {
     super(element)
 
     this._config = this._getConfig(config)
+
     this._currentValue = this._config.value
+    this._dragIndex = 0
     this._inputs = []
+    this._isDragging = false
     this._sliderTrack = null
+    this._thumbSize = null
     this._tooltips = []
-    this._isDragging = false
-    this._dragIndex = 0
 
     this._initializeRangeSlider()
   }
@@ -312,6 +316,7 @@ class RangeSlider extends BaseComponent {
     }
 
     const inputs = SelectorEngine.find(SELECTOR_RANGE_SLIDER_INPUT, this._element)
+    this._thumbSize = this._getThumbSize()
 
     for (const input of inputs) {
       const tooltipElement = this._createElement('div', CLASS_NAME_RANGE_SLIDER_TOOLTIP)
@@ -327,9 +332,32 @@ class RangeSlider extends BaseComponent {
     }
   }
 
+  _getThumbSize() {
+    const value = window
+    .getComputedStyle(this._element, null)
+    .getPropertyValue(
+      this._config.vertical ? '--cui-range-slider-thumb-height' : '--cui-range-slider-thumb-width'
+    )
+
+    const regex = /^(\d+\.?\d*)([%a-z]*)$/i
+    const match = value.match(regex)
+
+    if (match) {
+      return {
+        value: Number.parseFloat(match[1]),
+        unit: match[2] || null
+      }
+    }
+
+    return null
+  }
+
   _positionTooltip(tooltip, input) {
+    const thumbSize = this._thumbSize
     const percent = (input.value - this._config.min) / (this._config.max - this._config.min)
-    const margin = percent > 0.5 ? `-${percent - 0.5}rem` : `${0.5 - percent}rem`
+    const margin = percent > 0.5 ?
+      `-${(percent - 0.5) * thumbSize.value}${thumbSize.unit}` :
+      `${(0.5 - percent) * thumbSize.value}${thumbSize.unit}`
 
     if (this._config.vertical) {
       Object.assign(tooltip.style, {
@@ -442,6 +470,10 @@ class RangeSlider extends BaseComponent {
   }
 
   _updateGradient() {
+    if (!this._config.track) {
+      return
+    }
+
     const [min, max] = [Math.min(...this._currentValue), Math.max(...this._currentValue)]
     const from = ((min - this._config.min) / (this._config.max - this._config.min)) * 100
     const to = ((max - this._config.min) / (this._config.max - this._config.min)) * 100

scss/_range-slider.scss

@@ -28,6 +28,8 @@
   --#{$prefix}range-slider-tooltip-zindex: #{$zindex-tooltip};
   --#{$prefix}range-slider-tooltip-padding-y: #{$range-slider-tooltip-padding-y};
   --#{$prefix}range-slider-tooltip-padding-x: #{$range-slider-tooltip-padding-x};
+  --#{$prefix}range-slider-tooltip-margin-end: #{$range-slider-tooltip-margin-end};
+  --#{$prefix}range-slider-tooltip-margin-bottom: #{$range-slider-tooltip-margin-bottom};
   --#{$prefix}range-slider-tooltip-font-size: #{$range-slider-tooltip-font-size};
   --#{$prefix}range-slider-tooltip-color: #{$range-slider-tooltip-color};
   --#{$prefix}range-slider-tooltip-bg: #{$range-slider-tooltip-bg};
@@ -57,7 +59,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+  height: max(var(--#{$prefix}range-slider-thumb-height), var(--#{$prefix}range-slider-track-height));
 }
 
 .range-slider-track {
@@ -208,7 +210,7 @@
   }
 
   .range-slider-tooltip {
-    bottom: calc(1.5 * var(--#{$prefix}range-slider-thumb-height)); // stylelint-disable-line function-disallowed-list
+    bottom: calc(var(--#{$prefix}range-slider-tooltip-margin-bottom) + var(--#{$prefix}range-slider-thumb-height)); // stylelint-disable-line function-disallowed-list
   }
 
   .range-slider-tooltip-arrow {
@@ -233,7 +235,7 @@
 
   .range-slider-inputs-container {
     justify-content: center;
-    width: add($form-range-thumb-width, $form-range-thumb-focus-box-shadow-width * 2);
+    width: max(var(--#{$prefix}range-slider-thumb-width), var(--#{$prefix}range-slider-vertical-track-width));
     height: 100%;
   }
 
@@ -249,7 +251,7 @@
   }
 
   .range-slider-tooltip {
-    @include ltr-rtl("right", calc(1.5 * var(--#{$prefix}range-slider-thumb-width)));
+    @include ltr-rtl("right", calc(var(--#{$prefix}range-slider-tooltip-margin-end) + var(--#{$prefix}range-slider-thumb-width)));
     flex-direction: row;
     transform: translateY(50%);
   }

scss/_variables.scss

@@ -2547,6 +2547,8 @@ $range-slider-thumb-transition:            background-color .15s ease-in-out, bo
 
 $range-slider-tooltip-padding-y:           $spacer * .25 !default;
 $range-slider-tooltip-padding-x:           $spacer * .5 !default;
+$range-slider-tooltip-margin-end:          .25rem !default;
+$range-slider-tooltip-margin-bottom:       .25rem !default;
 $range-slider-tooltip-font-size:           $font-size-sm !default;
 $range-slider-tooltip-color:               var(--#{$prefix}body-color) !default;
 $range-slider-tooltip-bg:                  var(--#{$prefix}secondary-bg) !default;