Web Components Slider & Range Slider Overview

    The Web Components Slider & Range Slider components allow 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.

    Web Components Slider & Range Slider Example

    EXAMPLE
    TS
    HTML
    index.css
    SliderOverviewStyle.css

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    First, you need to install the Ignite UI for Web Components by running the following command:

    npm install igniteui-webcomponents
    cmd

    Before using the IgcSliderComponent and IgcRangeSliderComponent, you need to register them as follows:

    import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcSliderComponent, IgcRangeSliderComponent);
    ts

    For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

    The simplest way to start using the IgcSliderComponent and IgcRangeSliderComponent is as follows:

    <igc-slider value="40"></igc-slider>
    <igc-range-slider lower="20" upper="70"></igc-range-slider>
    html

    Value

    The main difference between the Slider and Range Slider components is that the Slider component has a single thumb, while the Range Slider component has two thumbs. The single thumb of the Slider component displays its value property. The two thumbs of the Range Slider component display its lower and upper value properties.

    Both sliders emit two events when any of the values is changed. The IgcInputComponent event is emitted whenever a value is changed using keyboard or drag interaction while the igcChange event is emitted when the value change is committed on drag end or keyboard interaction.

    EXAMPLE
    TS
    HTML
    index.css
    SliderValueStyle.css

    While dragging a slider thumb, it displays its value in a tooltip. You could hide this tooltip using the hideTooltip property.

    Disabled

    You can use the disabled property of the sliders to disable their user interactions.

    EXAMPLE
    TS
    HTML
    index.css
    SliderDisabledStyle.css

    Constraints

    The track of the sliders has a minimum and maximum values which are configured using the min and max properties. Additionally, you can restrict the thumb dragging using the lowerBound and upperBound properties.

    EXAMPLE
    TS
    HTML
    index.css
    SliderConstraintsStyle.css

    Step

    The step property specifies the granularity of the slider that the value must adhere to. By default, the slider track looks continuous. Setting the discreteTrack property of the slider to true will make it to display the steps on the track.

    EXAMPLE
    TS
    HTML
    index.css
    SliderDiscreteStyle.css

    If the step property is set to 0, no stepping is implied and any value in the slider range is allowed. In this case, the slider will look continuous even if discreteTrack is set to true.

    Tick Marks

    The slider components could display tick marks and labels. The slider components support two types of tick marks: primary and secondary. In order to display the primary tick marks, you should set the primaryTicks property to a value greater than 1. The number of primary ticks will be evenly distributed on the track. In order to display the secondary tick marks, you should set the secondaryTicks property to a value greater than 0. The value of secondaryTicks specifies the number of secondary ticks between every two primary ticks.

    EXAMPLE
    TS
    HTML
    index.css
    SliderTicksStyle.css

    Additionally, you could configure the orientation of the tick marks using the tickOrientation property. By default, the tickOrientation value is end which displays the ticks below the slider track. You could set it to start which displays them above the track and mirror which mirrors the ticks above and below the track.

    By default, the tick marks display labels with their values. You could modify the rotation of the tick labels using the tickLabelRotation property. Additionally, you could hide the labels of the primary and secondary ticks using the hidePrimaryLabels and hideSecondaryLabels properties.

    EXAMPLE
    TS
    HTML
    index.css
    SliderTickLabelsStyle.css

    Value Format

    If you want to format the thumb and tick label values, the slider provides valueFormat, valueFormatOptions and locale properties. Тhe valueFormatOptions allows you to specify the number of fraction and significant digits, style (decimal, currency, percent, unit), notation and others taking into account the specified locale. The valueFormat is a string which may contain the {0} identifier which will be replaced by the value with applied format options.

    EXAMPLE
    TS
    HTML
    index.css
    SliderValueFormatStyle.css

    Labels

    In some cases you would want to format the values of the slider as string values i.e. map the values [0, 1, 2] to ['Low', 'Medium', 'High']. For this scenario the slider allows you to define IgcSliderLabelComponent elements inside it. The text content of the slider labels is going to be used for thumb and tick labels. Please note that when slider labels are provided, the min, max and step properties are automatically calculated so that they do not allow values that do not map to the provided labels. In the case of 'Low', 'Medium' and 'High' labels, min is set to 0, max is set to 2 and step is set to 1.

    EXAMPLE
    TS
    HTML
    index.css
    SliderLabelsStyle.css

    Ignite UI for Web Components | CTA Banner

    Styling

    The IgcSliderComponent component exposes CSS parts for almost all of its inner elements. The following table lists all of the exposed CSS parts:

    Name Description
    base The base wrapper of the slider.
    ticks The ticks container.
    tick-group The tick group container.
    tick The tick element.
    tick-label The tick label element.
    tick-label-inner The inner element of the tick label.
    thumbs The thumbs container.
    thumb The thumb element.
    thumb-label The label container of the thumb tooltip.
    thumb-label-inner The label element of the thumb tooltip.
    track The track container.
    steps The track steps element.
    inactive The inactive element of the track.
    fill The filled part of the track.

    The following sample demonstrates how to style the track fill and thumb parts:

    EXAMPLE
    TS
    HTML
    index.css
    SliderStyling.css

    API References

    Additional Resources