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: https://github.com/Esri/calcite-components/issues/5522 https://github.com/Esri/calcite-components/issues/2584 https://github.com/Esri/calcite-components/issues/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

[geospatialem]

Priority has shifted to a medium status, with Maps SDK shifting priority to #6590 and #6591.

[driskull]

Since this is a feat/refactor with possible breaking change should it be pushed to July or Oct?

[geospatialem]

Per Matt's comment above removing from the June milestone, and will assign a milestone once the breaking change milestone is determined. cc @brittneytewks

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

[jcfranco]

Blocked by https://github.com/Esri/calcite-design-system/issues/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.