richiecarmichael commented 1 year ago

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:

slider.labelTicks is obsolete
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 commented 1 year ago

@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 commented 1 year ago

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

brittneytewks commented 1 year ago

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

geospatialem commented 1 year ago

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

driskull commented 1 year ago

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

geospatialem commented 1 year ago

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 commented 7 months ago

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.