Is there a way to remove the thousands separator on the slider handle labels/values when it is static and being dragged? I am trying to format the values to allow the user to select a range between years years. For example I would like the labels to display "1970" instead of "1,970"
https://developers.arcgis.com/calcite-design-system/components/slider/
Thanks!
Hey @BobCowling2,The enhancement request that Ben mentioned above has been released in 2.8.0.
The Related Issue: https://github.com/Esri/calcite-design-system/issues/4004#issuecomment-2075958104
Slider now has a groupSeparator property. By default, the separator won’t be present (e.g., 2000). When true, a separator will be added (e.g., 2,000).
<!-- Slider without separator --> <calcite-slider min="2000" max="3000" value="2500" label-handles></calcite-slider> <!-- Slider with separator --> <calcite-slider min="2000" max="3000" value="2500" label-handles group-separator></calcite-slider>
Hi @BobCowling2,
There is also a GitHub enhancement request to allow for custom handles and ticks:
https://github.com/Esri/calcite-components/issues/4004
Hello @BobCowling2, the Calcite Slider component is aimed more for numeric adjustable values. To showcase years there's a bit of customization needed.
On load you could set a Calcite Label to the initial slider value, and add an event listener to update the value as the user interacts with the component using the calciteSliderChange event.
For instance, an example with the range of 1900-2000 and 1970 selected on initialization:
<style> calcite-slider { width: 50vw; margin: auto; padding: 10px; } #sliderLabel { font-weight: bold; } </style> <calcite-label alignment="center" for="slider" id="sliderLabel">1970</calcite-label> <calcite-slider id="slider" min="1900" max="2000" value="1970" step="1"></calcite-slider> <script> window.addEventListener("calciteSliderChange", (result) => { const sliderVal = document.getElementById("slider").value; // Removes "," character from the number document.getElementById("sliderLabel").innerHTML = sliderVal.toString().replace(/,/g, ""); }); </script>
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
