Format labels/values on slider

05-14-2022 07:34 AM
Labels (2)
New Contributor II

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"




0 Kudos
2 Replies
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:

calcite-slider {
  width: 50vw;
  margin: auto;
  padding: 10px;
#sliderLabel {
  font-weight: bold;

<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>

window.addEventListener("calciteSliderChange", (result) => {
    const sliderVal = document.getElementById("slider").value;
    // Removes "," character from the number
    document.getElementById("sliderLabel").innerHTML = sliderVal.toString().replace(/,/g, "");


0 Kudos
Esri Contributor

Hi @BobCowling2,

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