Skip to content

Slider Specification

Danail Marinov edited this page Jun 17, 2019 · 41 revisions

Slider Specification

Contents

  1. Overview
  2. User Stories
  3. Behavior
  4. Anatomy
  5. States
  6. Dev Stories
  7. Acceptance Criteria
  8. ARIA
  9. API

Revision History

Version User Date Notes
0.1 Danail Marinov Apr 17, 2019 Initial draft
0.2 Danail Marinov Apr 24, 2019 Update
0.2.1 Danail Marinov Jun 17, 2019 Images update
  • Stefan Ivanov | Date:
  • Simeon Simeonoff | Date:
  • Zdravko Kolev | Date:
  • Konstantin Dinev | Date:

1. Overview

Slider component allows users to make selections from a range of values. They offer range of values from which the user can select a single value, or a sub-range. Changes applied through a slider are immediate. Usually slider bars have icons, inputs or titles on their both sides. Sliders indicate the current state of the settings they control.

Types

1. Continuous slider - allows users to select a value along a subjective range

2. Discrete slider - can be adjusted to a specific value by referencing its value indicator

2. User Stories

  • As an end user I want to see the range available for selection.
  • As an end user I want to be able to use label on the slider along the track, that will display the selected value through its position.
  • As an end user I want to be able to focus slider and to change its values through keyboard.
  • As an end user, if I am using discrete slider, I want to have snapping to closest predetermined values for my selection when moving the sliders thumb.
  • As an end user, if I am using discrete slider, I want predetermined values to be clearly visible shown as tick marks.
  • As an end user I want to be able to make my selection of the slider's values through dragging the thumb.
  • As an end user I want to be able to make my selection of the slider's values through clicking on the track.
  • As an end user I want to be able to click on the thumb, then move it through the keyboard arrows.
  • As an end user I want to be able to view the selected range (track) when using two-thumb slider.
  • As an end user, I want to be able to change the positioning of the thumbs through separate data bound fields.
  • As an end user, I want to have boundaries that prevent me to drag the thumbs to the max or min values of the slider

3. Behavior

3.1 Click and drag

Continuous and discrete sliders are controlled by clicking on the slider thumb, then dragging it along the slider bar.

3.2 Click jump

Continuous and discrete sliders are controlled by clicking on the slider bar, which determines slider thumb position.

3.3 Click and arrows

Continuous and discrete sliders are controlled by clicking on the slider thumb, which puts it on focus, then thumb's position is controlled by the keyboard arrows.

3.4 Tab and arrows

Continuous and discrete sliders are selected on using TAB key, then thumb's position is controlled by the keyboard arrows.

3.5 Using arrows

Using keyboard arrows for controlling slider thumb position on:

  • continuous slider results in continuously increment/decrement.
  • discrete slider results in increment/decrement and the thumb changes its position on predefined steps.

4. Anatomy

Anatomy

The size of the label has to be shrink or enlarge based on the data type and size inside the label.

5. States

5.1 Dark version

  • continuous (default)

Dark-Continuous

  • discrete (default)

Dark-Discrete

5.2 Light version

  • continuous (default)

Light-Continuous

  • discrete (default)

Light-Discrete

Zeplin: https://zpl.io/25JJ1rr

6. Dev stories

  • As a developer I want to be able to set always visible label (not only on hover).

Dark-Continuous-Always-visible-label

Dark-Discrete-Always-visible-label

Light-Continuous-Always-visible-label

Light-Discrete-Always-visible-label

  • As a developer I want to be able to choose between discrete and continuous slider.
  • As a developer I want to be able to specify intervals in discrete slider.
  • As a developer I want to be able to enable or disable slider.
  • As a developer I want to be able to edit all slider components such as thumb, track etc. and their properties such as color, shape etc.
  • As a developer I want to be able to edit ripple properties and animation for hover, pressed and focus state.
  • As a developer I want to be able to provide an array of primitive values that the slider could spread and visualize as labels of the thumbs.
<igx-slider [labels]="['spring', 'autumn', 'winter', 'summer']">
</igx-slider>
  • As a developer I want to be able to customize the label(s)' content.
<igx-slider
  [labels]="['spring', 'autumn', 'winter', 'summer']">
  <ng-template igxSliderThumbTo let-val let-labels="labels">
    <span>{{ labels[val.upper] }} </span>
   </ng-template>
</igx-slider>
  • As a developer I want to be able to change the type of the slider affecting value selection as single or range.
<igx-slider [labels]="['spring', 'autumn', 'winter', 'summer']" [type]="sliderType">
</igx-slider>
  • As a developer, I want to be able to track the changes of the values per every slide.

  • As a developer, I want to have the ability to manipulate the slider values through two way data binding.

  • As a developer, I want to be able to change the sliding behavior from continuous to discrete and vice versa.

<igx-slider [continuous]="true">
</igx-slider>
  • As a developer, I want to be able to set a minimum and maximum values representing the beginning and end of a number sequence.
[begin....end]
<igx-slider [minValue]="20" [maxValue]="80">
</igx-slider>
  • As a developer, I want to have the ability to set boundaries, limiting the sliding range in a given sequence of numbers.
[begin..lowerBound.......upperBound...end]
<igx-slider [lowerBound]="30" [upperBound]="70">
</igx-slider>
  • As a developer, I want to have the ability to set the visibility duration of the thumb label that shows the slider value.

  • As a developer, I want to be able to manipulate the positioning of the slider thumb through the API.

  • As a developer, I want to be able to pass a custom templates that could modify the thumb label representation

<igx-slider>
 <ng-template igxSliderthumbFrom let-val let-labels="labels">
    <span>{{ val }}</span>
  </ng-template>
</igx-slider>

7. Acceptance criteria

  1. The developer can create a slider by only giving the min/max ranges.
  2. The developer can create sliders consisting of one or two thumb(s).
  3. The developer can set boundaries limiting the slider range.
  4. The developer can choose between continuous or discrete slide.
  5. The developer can set custom templates representing the thumb(s) label(s).

8. ARIA Support

  • role - indicates the type of the widget (slider).
  • aria-valuemin - minimum allowed value for a range selector
  • aria-valuemax - maximum allowed value for a range selector
  • aria-readonly - Indicates whether the element is editable.

9. API

Enums

SliderType

Name Description
SLIDER Slider with single thumb.
RANGE Range slider with multiple thumbs, that can mark the range.

Interfaces

IRangeSliderValue

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

ISliderValueChangeEventArgs

Name Type Description
oldValue number | IRangeSliderValue Previous value of the slider
new number | IRangeSliderValue Current value of the slider

Inputs

Name Description Type Default value
id Unique identifier of the component. If not provided it will be automatically generated. string igx-slider-0
disabled Disables or enables UI interaction. boolean false
continuous Marks slider as continuous. By default is considered that the slider is discrete. Discrete slider does not have ticks and does not shows bubble labels for values. boolean false
lowerBound The lower boundary of the slider value. If not set is the same as min value. number 0
upperBound The lower boundary of the slider value. If not set is the same as max value. number 100
minValue The minimum value for the slider. number 0
maxValue The maximal value for the slider. number 100
step The incremental/decremental step of the value when dragging the thumb. The step should be greater than 0. number 1
thumbLabelVisibilityDuration The duration visibility of thumbs labels. number 750 ms
type Sets the SliderType, which is SLIDER or RANGE. SliderType SLIDER
value The slider value. If the slider is of type SLIDER the argument is number. By default if no value is set the default value is same as lower upper bound. If the slider type is RANGE then the argument is object containing lower and upper properties for the values. By default if no value is set the default value is for lower value it is the same as lower bound and if no value is set for the upper value it is the same as the upper bound. number|IRangeSliderValue
labels Enables lableView, by accepting a collection of primitive values with more than one element. Each element will be equally spread over the slider and it will serve as a thumb label. array empty array

Getters

Name Description Type
lowerLabel Returns the value of the lower thumb label number|string
upperLabel Returns the value of the upper thumb label number|string

Events

Name Description Cancelable Parameters
onValueChange This event is emitted when user has stopped interacting with the thumb and value is changed. no ISliderValueChangeEventArgs

6. Test Scenarios

Automation

Base

SLIDER type
  • The value should be correlated with the upperValue.
  • Continuous(smooth) sliding should be allowed - should be tested
RANGE type
  • When lower/upper values are not set, they should take the values of lower/upper bounds.
  • When the lower thumb gets to the upper thumb, the focus should change to the upper, in order to continue sliding and vica versa.
  • Continuous(smooth) sliding should be allowed - should be tested
Label view
  • When labels is set, the rendering of the slider should corresponds to that collection. - should be tested
  • When labels view is enabled the min/max and step setters should not respond to user manipulations, and the default values should be taken. - - should be tested
  • When labels view is enabled, tick marks(steps) should be shown equally spread based on the labels length. - should be tested
  • When lower/upper bounds are set, the slide limitations should be applied. - should be tested
  • Continuous(smooth) sliding should not be allowed. - should be tested
  • Set labels to empty array and null. - should be tested
  • The view should be enabled only when the collection has more than 1 element. - should be tested
COMMON
  • When lower/upper bound are not set, they should take the values of min/max.
  • API modifications should be allowed for the min/max/lower/upper values, lower/upper bounds, value, continuous and disabled.
  • Min value should not exceed but decrease when it's bigger than the max value.
  • Max value should not go below min value and increase with 1.
  • When lower bound exceeds **upper **bound it should take the value of the min.
  • The value should always track as first the range between lower/upper bound, then the range between min/max value, independently of the slider type.
  • The slider thumb/s should be moving when pressing left/right arrow keys.
  • When the slider is disabled the interaction with the UI should not be possible.
  • Tick marks(steps) should appear when the step is more then 1.
  • should be able to track the value changes per every slide action through an event emitter. - should be tested
  • Custom templates for the lower/upper thumb labels should be allowed - should be tested
  • Dynamically change the type of the slider SLIDE, RANGE, LABEL - should be tested
  • The aria properties should be successfully applied. - should be tested
  • When upper bound is lower or equal than the lower bound it should take the value of the max. - should be tested
Clone this wiki locally
You can’t perform that action at this time.