Slider Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Assumptions and Limitations
6. References

Objectives

The Slider component allows selection in a given range by moving the thumb along the track. The track can be defined as continuous or stepped and you can choose between SINGLE and RANGE slider types.

2. User Stories

Developer:

As a developer I would like to:

• be able to provide an array of strings that the slider could spread and visualize it as labels of the thumbs.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']">
</igx-slider>

• be able to change the type of the slider as a single or range.

<igx-slider [stepLabels]="['spring', 'autumn', 'winter', 'summer']" [type]="sliderType">
</igx-slider>

• be able to track the changes of the values per every slide.
• have the ability to manipulate the slider values through two way data binding.
• have a continuous and discontinued(stepped) representation of the slider.

End user:

As end user I would like to:

• be able to pass an array of values represented by the thumbs of the slider.
• be able to navigate through the slider by dragging the pins.
• be able to change the positioning of the pins through the API.

Acceptance criteria

1. Have a slider that represents a sequence of numbers [1...n]
2. Have a slider that allows smooth navigation with mouse drag.
3. Have the ability to put boundaries for sliding and rendering.
4. Have a slider that shows the values we are navigating through.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End User Experience

3.2. Developer Experience

3.3. Globalization/Localization

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

3.4. User Interface

Include a diagram linking the elements with the visual representation of the feature

3.5. Navigation

3.6. 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
upper	number	The upper value of the range 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

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

4. ARIA Support

Specify only if applicable

5. Assumptions and Limitations

Assumptions	Limitation Notes

6. References

Specify all referenced external sources