Format labels/values on slider

864
3
05-14-2022 07:34 AM
Labels (2)
BobCowling2
New Contributor III

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! 

 

0 Kudos
3 Replies
KittyHurley
Esri Contributor

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>

 

0 Kudos
BenElan
Esri Contributor

Hi @BobCowling2,

There is also a GitHub enhancement request to allow for custom handles and ticks: 

https://github.com/Esri/calcite-components/issues/4004

KittyHurley
Esri Contributor

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>