Slider: No difference in selected and non-selected part of slider

[anwishaZ]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the Modus style guidelines

Proposal

In slider we expect the slided part alone to be shown as blue color but the whole slider is shown in blue ,which creates a discrepancy in understanding how much area has been covered by the slider .

Motivation and context

The use case is we need to highlight the part which has been covered by the user ,so selected half should be in blue color and the other unselected half should be in grey

What is the issue regarding ?

@trimble-oss/modus-web-components

Priority

Medium

What product/project are you using Modus Components for ?

TRIMBLE FORESTRY

What is your team/division name ?

Central Product development

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

Yes

[github-actions[bot]]

Hello @anwishaZ! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

[coliff]

This could be fixed with a little bit of JavaScript.

I tested this for Modus Bootstrap. Screenshot:

Fix:

.form-range::-moz-range-track{background:linear-gradient(to right, #0063a3 0%, #0063a3 var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%)}
.form-range::-webkit-slider-runnable-track{background:linear-gradient(to right, #0063a3 0%, #0063a3 var(--value, 0%), #dee2e6 var(--value, 0%), #dee2e6 100%)}

      // Getting all the range inputs
      const ranges = document.querySelectorAll("input[type=range]");

      // Adding a listener to every input in order to have a dynamic progress
      for (const range of ranges) {
        range.addEventListener("input", () => {
          const value = ((range.value - range.min) / (range.max - range.min)) * 100;
          range.style.setProperty("--value", `${value}%`);
        });
      }

      document.addEventListener("DOMContentLoaded", () => {
        for (const range of ranges) {
          const value = ((range.value - range.min) / (range.max - range.min)) * 100;
          range.style.setProperty("--value", `${value}%`);
        }
      });

[coliff]

A less good alternative is to use a simple, native form range with the accent-color: CSS to use the correct Modus blue.

Live demo: https://codepen.io/coliff/pen/mdZyzLe

input[type="range"] {
  accent-color: #217cbb;
}

[prashanth-offcl]

@mitch-trimble Could you please review this issue? Additionally, please note that the Figma web and mobile kits have different look and feel.

https://www.figma.com/design/wyfVJUHWRMkeCfdB38HFEE/Modus---Web?node-id=1856-12373&t=4F7KfhawPvbcU7zt-0 https://www.figma.com/design/Bfpyk5rbSsmwfIacqzg9HS/Modus---Mobile?node-id=846-0&t=SEI1idfFHtMbr2mP-0