Skip to content

Slider Specification

Jump to bottom
Maria Tsvyatkova edited this page Aug 26, 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.
  • 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

3.5. API

Interfaces

ISliderValueChangeEventArgs

Name Description Type
oldValue The previous value of the slider. number | IRangeSliderValue
value The current value of the slider. number | IRangeSliderValue

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
minValue The minimum value of the slider. number 0 false
maxValue 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 0 false
upperBound The upper boundary of the slider value. If not set is the same as max value. number 0 false
type Specifies if the slider is of type SLIDER or RANGE. SLIDER | RANGE SLIDER false
disabled Disables or enables UI interaction. boolean false false
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 false
step Determines the increments/decrements the thumb will move. number 1 false
labels Displays thumb labels. Accepts a collection of primitive values with more than one element and spread them evenly over the slider. array [] false
thumbLabelVisibilityDuration Specifies how many milliseconds it will be before the thumb label closes when it is not hovered anymore. number 750 false
showTicks Shows/hides slider ticks. boolean true false
primaryTicks Sets the number of primary ticks. It should be greater than one for the ticks to be displayed. number 2 false
secondaryTicks Sets the number of secondary ticks. It should be greater than one for the ticks to be displayed. number 0 false
primaryTickLabels Show/hides primary tick labels. boolean true false
secondaryTickLabels Show/hides secondary tick labels. boolean true false
tickOrientation Changes the orientation of the ticks. mirror | top | bottom bottom false
tickLabelOrientation Changes the orientation of the tick labels. horizontal | toptobottom | bottomtotop horizontal false

Events

The igc-slider should emit the following event:

Name Description Cancelable Parameters
igcChange Emitted when the slider value is changed. false ISliderValueChangeEventArgs

CSS Parts

Name Description
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.
tick-group The group of primary/secondary ticks.
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

  • <igc-slider> have role="slider";
  • aria-valuemin - the minimum allowed value;
  • aria-valuemax - the maximum allowed value;
  • aria-valuenow - 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