topic Re: Format labels/values on slider in Calcite Design System Questions

Format labels/values on slider

BobCowling2 — Sat, 14 May 2022 14:34:20 GMT

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!

Re: Format labels/values on slider

KittyHurley — Mon, 16 May 2022 13:41:21 GMT

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:

Re: Format labels/values on slider

BenElan — Mon, 16 May 2022 16:16:22 GMT

Hi @BobCowling2,

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

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

Re: Format labels/values on slider

KittyHurley — Wed, 05 Oct 2022 19:03:28 GMT

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

<calcite-slider min="2000" max="3000" value="2500" label-handles></calcite-slider>  <calcite-slider min="2000" max="3000" value="2500" label-handles group-separator></calcite-slider>

Re: Format labels/values on slider

DitwanPrice — Thu, 02 May 2024 19:24:27 GMT

Hey @BobCowling2,

The enhancement request that Ben mentioned above has been released in 2.8.0.