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

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderOverviewStyle.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderOverview {
    constructor() {
    }
}

new SliderOverview();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Overview</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider,
igc-range-slider {
    padding: 30px 30px  0px 30px;
    flex-grow: 1;
}

.slider-container {
    display: flex;
    align-items: baseline;
}

.slider-label {
    width: 100px;
    text-align: end;
}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.

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderValueStyle.css';

defineComponents(IgcSliderComponent, IgcRangeSliderComponent);

export class SliderValue {
    constructor() {
        const slider = document.querySelector('igc-slider') as IgcSliderComponent;
        const rangeSlider = document.querySelector('igc-range-slider') as IgcRangeSliderComponent;
        const sliderValueSpan = document.getElementById('slider-value') as HTMLElement;
        const sliderLowerSpan = document.getElementById('slider-lower') as HTMLElement;
        const sliderUpperSpan = document.getElementById('slider-upper') as HTMLElement;

        slider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderValueSpan.innerHTML = ev.detail;
        });

        rangeSlider.addEventListener('igcInput', (ev: CustomEvent) => {
            sliderLowerSpan.innerHTML = ev.detail.lower;
            sliderUpperSpan.innerHTML = ev.detail.upper;
        });
    }
}

new SliderValue();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
          <igc-slider value="40"></igc-slider>
          <div class="value-container">
            <span class="slider-label">Value: </span>
            <span id="slider-value">40</span>
          </div>

          <igc-range-slider lower="20" upper="70"></igc-range-slider>
          <div class="value-container">
            <span class="slider-label">Lower: </span>
            <span id="slider-lower">20</span>
            <span class="slider-label">, Upper: </span>
            <span id="slider-upper">70</span>
          </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider,
igc-range-slider {
    padding: 30px 30px  0px 30px;
}

.value-container {
    padding-left: 30px;
    display: flex;
}

.slider-label {
    white-space: pre;
}
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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDisabledStyle.css';

defineComponents(IgcSliderComponent);

export class SliderDisabled {
    constructor() {
    }
}

new SliderDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Disabled</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider value="40" disabled>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderConstraintsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderConstraints {
    constructor() {
    }
}

new SliderConstraints();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Constraints</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          max="1000"
          min="100"
          lower-bound="200"
          upper-bound="800"
          value="400"
          primary-ticks="2"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderDiscreteStyle.css';

defineComponents(IgcSliderComponent);

export class SliderDiscrete {
    constructor() {
    }
}

new SliderDiscrete();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Discrete Track</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider step="10" discrete-track>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderTicksStyle.css';

defineComponents(IgcSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Marks</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderTickLabelsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderTickLabels {
    constructor() {
    }
}

new SliderTickLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Tick Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="6"
          secondary-ticks="1"
          tick-orientation="mirror"
          tick-label-rotation="-90"
          hide-secondary-labels
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderValueFormatStyle.css';

defineComponents(IgcSliderComponent);

export class SliderValueFormat {
    constructor() {
        const slider1 = document.getElementById('slider1') as IgcSliderComponent;
        const slider2 = document.getElementById('slider2') as IgcSliderComponent;

        slider1.valueFormatOptions = {
            style: 'currency',
            currency: 'USD'
        }

        slider2.valueFormatOptions = {
            minimumFractionDigits: 1
        }
    }
}

new SliderValueFormat();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Value Format</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          id="slider1"
          primary-ticks="3"
          secondary-ticks="4"
        >
        </igc-slider>

        <igc-slider
          id="slider2"
          value-format="Storage: {0} GB"
        >
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 50px;
}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.

import { defineComponents, IgcSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderLabelsStyle.css';

defineComponents(IgcSliderComponent);

export class SliderLabels {
    constructor() { }
}

new SliderLabels();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Labels</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <igc-slider
          primary-ticks="3">
          <igc-slider-label>Low</igc-slider-label>
          <igc-slider-label>Medium</igc-slider-label>
          <igc-slider-label>High</igc-slider-label>
        </igc-slider>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
    width: 300px;
}css

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:

import { defineComponents, IgcSliderComponent, IgcRangeSliderComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SliderStyling.css';

defineComponents(IgcSliderComponent);
defineComponents(IgcRangeSliderComponent);

export class SliderTicks {
    constructor() {
    }
}

new SliderTicks();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Slider Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample center">
        <div class="slider-container">
          <span class="slider-label">Slider</span>
          <igc-slider value="40"></igc-slider>
        </div>
        <div class="slider-container">
          <span class="slider-label">Range Slider</span>
          <igc-range-slider lower="20" upper="70"></igc-range-slider>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-slider {
    padding: 30px 30px  0px 30px;
}

igc-range-slider {
    padding: 30px 30px  0px 30px;
}

igc-slider::part(thumb) {
background: #28a745;
}

igc-slider::part(thumb):focus {
    background: #28a745;
    box-shadow: 0 0 0 2px #28a74694;
}

igc-slider::part(fill) {
    display: block;
    background: #28a745;
}

igc-range-slider::part(thumb) {
    background: orange;
}

igc-range-slider::part(thumb):focus {
    background: navy;
    box-shadow: 0 0 0 2px orange;
}

igc-range-slider::part(track) {
    display: block;
    background: navy;
}

igc-range-slider::part(thumb-label-inner) {
    background: navy;
}css