calcite-slider > capabilities wishlist

[richiecarmichael]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

The ArcGIS Maps for JavaScript (aka JSSDK) team have a project underway to modernize/update the TimeSlider widget. TimeSlider currently utilizes the JSSDK's Slider widget.

Moving forward it is advantageous to adopt the Calcite's Slider. The Calcite alternative is modern, accessible, attractive, and actively maintained.

The JSSDK team is aware of #5827, an issue to add support for irregular and independent ticks, labels and steps. This issue goes further to suggest other capabilities that would make TimeSlider's transition from the JSSDK's Slider to Calcite's Slider easier.

Temporarily change the primary color

TimeSlider has an invalid state when assigned values that fall outside the slider's min/max range. An example of this is when a TimeSlider is configured for dates between 1990 and 2000 but is indirectly assigned 1980 (e.g. when associated with a View).

Perhaps to handle this, the user just needs to temporarily change the slider's primary color to indicate an invalid state? For example.

Locking a range

A frequent enhancement request for TimeSlider is the ability to lock a range so that the range-bar moves without increasing in width. This is advantageous when the user wants the range to always span a specific timeframe like one month. Another use case is when the range is tiny compared to the min/max making sliding the range impossible without adjusting the end thumbs.

Note that when a slider's range bar is moved, the end thumbs should snap to the nearest steps. This is important when steps are irregularly spaced. For example month in a year are not eqi-spaced.

Additionally, when a range is locked clicking on the adjacent track will cause the range-bar to slide. When unlocked this action would cause the nearest thumb to snap to the clicked position.

Methods to support playback

TimeSlider needs to support playback capabilities, both interactively and as an animation. It would be useful for slider to have methods to advance to the next or previous step and to have properties that can inform the user if values are at the beginning or end.

Consider adding previous(), next(), moveToStart(), moveToEnd(), isAtStart and isAtEnd.

document.getElementById('buttonNext').addEventListener('click', () => {
  const slider = document.querySelector('slider');
  if (slider.isAtEnd) {
    if (this._allowLooping) {
      slider.moveToStart();
    }
  } else {
    slider.next();
  }
});

Free movement

It is currently for JSSDK's Slider and TimeSlider to have no steps. That is, thumbs, do not snap to any preset values between min and max when moved. Internally it is no unreasonable for thumbs to snap to individual pixels.

Related:

#1631 calcite-slider > configurable highlighting
#2584, #4004 calcite-slider > custom tick label formatters
#5522 calcite-slider > layout vertical and horizontal (in progress)
#5827 calcite-slider > decouple ticks, labels and stops

Acceptance Criteria

See above.

Relevant Info

No response

Which Component

calcite-slider

Example Use Case

No response

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

// @jcfranco @ubatsukh

[ubatsukh]

cc @mitc7862