calcite-slider > layout vertical and horizontal

[SaschaBrunnerCH]

Description

It should be possible to use the slider vertical. Like it is possible with the ArcGIS JS API Slider: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#layout

Blocked issues: https://github.com/Esri/calcite-design-system/issues/5827

Acceptance Criteria

Possible to configure the layout:

• horizontal
• horizontal-reversed
• vertical
• vertical-reversed

Relevant Info

See: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html#layout

Which Component

calcite-slider

Example Use Case

For a sample app we would like to include a slider to select the floor. For that purpose it should be vertical:

Example with the horizontal slider:

Esri team

ArcGIS API for JavaScript

[richiecarmichael]

This feature is required for: #46032 Range Slider

The JSAPI Range Slider will be used by MapViewer to assign values to multi-dimensional rasters.

// @driskull @jcfranco

[ubatsukh]

@driskull as we discussed yesterday this is a high priority issue for us! MV needs Range Slider for multidimensional image services and the API implementation cannot proceed until the calcite slider has support for this.

[brittneytewks]

Start work in April (relate to https://github.com/Esri/calcite-components/issues/5827)

[ashetland]

Hey folks, see the below for a proposed vertical layout Slider. In addition to layout=vertical, this outlines direction-reversed and labels-reversed. I haven't included range and histogram here, but they'd follow the same logic. Figma file available for more details.

[geospatialem]

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

[ashetland]

Current Figma design file. This should hopefully just need a review and revision of any final details.

[ashetland]

See this Figma file for designs for vertical Slider. Designs account for a new layout="horizontal | vertical" prop (horizontal would be the default), what it looks like when mirrored is set, as well as a new flip-labels prop.

flip-labels may not be needed, but it seemed appropriate to document since the placement of a vertical slider might necessitate an option for placing labels on the opposite side of the slider. Also documented is what that would look like in horizontal.

[github-actions[bot]]

cc @geospatialem, @brittneytewks