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]

Apologies for the belated update, but I think I have an idea on how to implement this without introducing a breaking change.

This is what it could look like:

class Slider {
  ticks: number | number[]; 
  labelTicks: boolean | number[];
  step: number | number[];
}

Worth noting that we cannot rely entirely on arrays for these properties because they would prevent users from setting these in markup (we don't support passing rich data as attributes, see https://web.dev/articles/custom-elements-best-practices#aim-to-only-accept-rich-data-objects,-arrays-as-properties for more info).

I'm planning to sync up with @richiecarmichael and also have some additional time for testing. With that said, this would have to be pushed to December.

[jcfranco]

Bumped the priority on this one. cc @brittneytewks @geospatialem

[geospatialem]

Additional efforts are needed to address prior to landing the fix, which are now targeted for the January 2024 release.