Skip to content

Slider Specification

Jump to bottom
Diyan Dimitrov edited this page Dec 9, 2021 · 16 revisions

Slider Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: CodeX

Developer Name: Maria Tsvyatkova

Designer Name:

Requires approval from

  • Peer Developer Name | Date:
  • Simeon Simeonov | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Maria Tsvyatkova 19-Aug-2021 Initial version

1. Overview

igc-slider component allows users to select values within a range. The users can select a single value, or a sub-range.

Types:

  • Continuous slider - the users can select a value along a subjective range.
  • Discrete slider - the slider is adjusted to a specific value. The allowed selections could be indicated with tick marks and the slider thumb will snap to them.

Objectives

The slider component indicates the current state of the settings they control. The changes made with them have immediate effect.

Acceptance criteria

  1. The slider can be set to continuous or discrete.
  2. Minimum and maximum values for the slider could be specified.
  3. The slider can have one or two thumbs.
  4. The slider can have boundaries limiting its range.
  5. The slider should have a step property to specify the increment/decrement values.
  6. Tick marks could be displayed and their position modified.
  7. Labels could be displayed for the tick marks and their orientation could be changed.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to choose between discrete and continuous slider, so that I can decide whether the ticks and bubble labels for the values are visible or not.
  • Story 2: As a developer, I want to be able to specify intervals for the discrete slider, so that I can change the step by which the slider value is changed.
  • Story 3: As a developer, I want to enable or disable the slider, so that I can decide whether the user can interact with it.
  • Story 4: As a developer, I want to change the type of the slider, so that I can set the value selection to single or range.
  • Story 5: As a developer, I want to know the previous and the current values per every slide, so that I can track the changes.
  • Story 6: As a developer, I want to manipulate the slider values using two way data binding, so that I can update the values dynamically.
  • Story 7: As a developer, I want to set minimum and maximum values, so that I can decide what values are displayed at the start and at the end of the track. Start and end value can be e.g. 0 and 100 and thumb default position 0 which is left end or -50 and +50 and thumb default position 0 which is middle.
  • Story 8: As a developer, I want to set boundaries, so that I can limit the sliding range in a given number sequence.
  • Story 9: As a developer, I want to modify the visibility duration of the thumb label which shows the current slider value, so that I can specify how many milliseconds it will be visible.
  • Story 10: As a developer, I want to enable tick marks and set different tick intervals, so that I can easily determine slider scale and track the thumb positioning.
  • Story 11: As a developer, I want to change the orientation of the tick marks, so that I can display them on top, bottom or both (mirrored).
  • Story 12: As a developer, I want to have to different types of tick marks - primary and secondary, so that I can display them with different height. By default, the primary ticks are 16px, and the secondary ticks are 8px.
  • Story 13: As a developer, I want to manipulate tick labels, so that I can decide whether primary and secondary tick labels are displayed or not.
  • Story 14: As a developer, I want to change tick label orientation, so that I can display the labels horizontally, top-to-bottom or bottom-to-top oriented.
  • Story 15: As a developer, I want to be able to modify the style of the slider elements, so that I can change their appearance to correspond to the application design.
  • Story 16: As a developer, I want to provide an array of primitive values that the slider can spread and visualize as thumb/tick labels, so that I can display them on the track.

End-user stories:

  • Story 1: As an end-user, I want to see the available range, so that I can easily choose the value I want to select.
  • Story 2: As an end-user, I want to have a label that will display the current value above the thumb, so that I can track when it is updated.
  • Story 3: As an end-user, I want to focus the slider, so that I can change its values through the keyboard.
  • Story 4: As an end-user, I want to have snapping to closest predetermined values for my selection while moving the thumb when using the discrete slider, so that I can easily change values based on the step.
  • Story 5: As an end-user, I want to have a discrete slider with predetermined values displayed as tick marks, so that I can easily see them.
  • Story 6: As an end-user, I want to move the thumb, so that I can change the selected value.
  • Story 7: As an end-user, I want to click on the track or very close to it, so that I can change the current value.
  • Story 8: As an end-user, I want to have the track within the two thumbs to be highlighted, so that I can see the selected range.
  • Story 9: As an end-user, I want to have boundaries, so that I can move the thumbs only within a given minimum and maximum values which can be different from the min and max values of the slider.
  • Story 10: As an end-user, I want to see the primary and secondary ticks and their labels, so that I can scale the slider track.
  • Story 11: As an end-user, I want to see a clear difference between primary and secondary ticks, so that I can easily determine the most important values.
  • Story 12: As an end-user, I want to change the tick position, so that I can display them on top/bottom/both.
  • Story 13: As an end-user, I want to change the tick label orientation, so that I can see them horizontally, toptobottom or bottomtotop orientated.

3. Functionality

3.1. End-User Experience

Slider types

Tick types and orientation

Dark version

  • continuous

  • discrete

Light version

  • continuous

  • discrete

3.2. Developer Experience

<igc-slider type="slider" 
    step="5"
    lowerBound="20"
    upperBound="80"
    showTicks="true"
    primaryTicks="5"
    secondaryTicks="20"
    primaryTickLabels="true"
    secondaryTickLabels="false"
    tickLabelOrientation="${labelOrientation}"
    tickOrientation="${tickOrientation}">
</igc-slider>

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys Description
Right Arrow Increases slider value one step.
Up Arrow Increases slider value one step.
Left Arrow Decreases slider value one step.
Down Arrow Decreases slider value one step.
Page Up Increases temperature slider value multiple steps (1/10th of its range).
Page Down Decreases temperature slider value multiple steps (1/10th of its range).
Home Sets slider to its minimum value.
End Sets slider to its maximum value.

3.5. API

Interfaces

IRangeSliderValue

Name Description Type
lower The lower value of the range slider or the lower index of the labels collection. number
upper The upper value of the range slider or the upper index of the labels collection. number

Properties

Name Description Type Default value Reflected
?value The current slider value. number | IRangeSliderValue 0 false
min The minimum value of the slider. number 0 false
max The maximum value of the slider. number 100 false
lowerBound The lower boundary of the slider value. If not set is the same as min value. number undefined false
upperBound The upper boundary of the slider value. If not set is the same as max value. number undefined false
?type Specifies the type of the slider. slider | range slider false
disabled Disables or enables UI interaction. boolean false true
?continuous Marks slider as continuous so it does not display ticks and bubble labels for values. By default the slider is considered discrete. boolean false true
?showTooltip
step Determines the increments/decrements the thumb will move. number 1 false
labelFormatter Specifies a custom arrow function to format the labels. (value: number) => string undefined false
primaryTicks Sets the number of primary ticks. If the property is set to 1 or 2, primary ticks are displayed at the beginning and at the end of the track number 0 false
secondaryTicks Sets the number of secondary ticks. It should be greater than one for the ticks to be displayed. number 0 false
showPrimaryLabels Show/hides primary tick labels. boolean true true
showSecondaryLabels Show/hides secondary tick labels. boolean true true
tickOrientation Changes the orientation of the ticks. mirror | start | end end false
?tickLabelRotation Sets the degrees for the rotation of the tick labels. 0 | 90 | -90 0 true

Events

The igc-slider should emit the following event:

Name Description Cancelable Parameters
igcChange Emitted when a value change is committed. false number | IgcRangeSliderValue
igcInput Emitted when the value is changed. false number | IgcRangeSliderValue

Methods

The igc-slider exposes the following methods:

Name Description Arguments
?incrementValue (stepUp) Increment the value with one step. -
?decrementValue (stepDown) Decrement the value with one step. -

CSS Parts

Name Description
base The base wrapper of the slider.
track The track of the slider.
fill Part of the track which is highlighted based on the slider value.
step The visual representation of the step that is used to increment/decrement the value.
tick The divider of the slider track.
tick-label The label for the tick.
thumb The thumb that can be moved to change the value of the slider.
thumb-label The label displayed above the thumb.

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support

  • slider thumbs have role="slider";
  • aria-valuemin - the minimum allowed value;
  • aria-valuemax - the maximum allowed value;
  • aria-valuenow - the current value;
  • aria-valuetext - the formatted label of the current value;
  • aria-disabled - indicates if the slider is disabled.

RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Specify all referenced external sources

Clone this wiki locally