calcite-slider > decouple ticks, labels and stops

[richiecarmichael]

Description

At present calcite-slider assumes that ticks, tick labels and stops coincide and that all three are at regular intervals. This is rarely the case. The solution is to have independent properties for all three. For examples:

{
  min: 0,
  max: 100,
  // Place small ticks at 10 unit spacing
  ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  // Label each quarter.
  labels: [0, 25, 50, 75, 100], 
  // Slider thumbs will snap at 10 unit intervals.
  steps: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}

What are Labels?

Label will consist of text and longer tick mark, See #2584 for proposal on custom label formatter.

Design

class slider {
  ticks: number[];
  labels: number[];
  steps: number[];
}

Breaking changes:

1. slider.labelTicks is obsolete
2. slider.ticks changes from number to number[]

// @driskull @jcfranco

Acceptance Criteria

See above.

Relevant Info

Related issues:

#5522 - calcite-slider > layout vertical and horizontal
#2584 - Enhancement: calcite-slider - custom tick label formatters
#1631 - Enhancement: Configurable slider highlighting

Which Component

calcite-slider

Example Use Case

Esri team

ArcGIS API for JavaScript

[ubatsukh]

@driskull can you please change the priority of this issue to high as MV is asking for dimension/range slider. @jcfranco, we hope you can work the slider issues when you get back from your paternity leave. :)

The other slider issues that need to be addressed before the Ranger slider widget can be implemented in the API:
#5522
#2584
#1631

Here are the API requirements for the Range Slider: https://devtopia.esri.com/WebGIS/arcgis-js-api/issues/46032#issuecomment-3805946

[driskull]

@ubatsukh marked them as higher priority. We will figure out which milestone these can be taken care of after the 1.0 release.

[brittneytewks]

Better understand user priority. Start in April for future milestone implementation

[jcfranco]

Blocked by #5522. @geospatialem @DitwanP

[richiecarmichael]

Good progress has been made to decouple steps, ticks and labels. Steps and ticks are now independent and while labels are coincident with ticks can be customized with a labelFormatter.

However steps and ticks are still regularly spaces from the start of the slider. When dealing with temporal data, irregular spaced steps, ticks and labels are the norm. Below are a few scenarios that have irregular steps/ticks/labels:

1. A slider with ticks representing imagery captured during the day.
2. A slider representing a time range with steps/ticks/labels representing:
   a) months (the number of days per month varies)
   b) years (leap years, leap seconds)

In this sample, the months of 2024 are shown as steps and ticks. Note that because these are evenly spaced that the start of July is assumed to be July 2.