Open anwishaZ opened 1 month ago
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.
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}%`);
}
});
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;
}
@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
Prerequisites
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 .![image](https://github.com/user-attachments/assets/e2844ac5-b2f9-4d37-a742-ddb01186f64d)
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