title	Angular Slider \| Ignite UI for Angular \| Infragistics \| MIT license
description	Learn how to configure a selection in a given range by using the thumb track with Angular Slider part of Ignite UI for Angular. Choose between singe and range slider types
keywords	angular slider, angular slider component, angular range slider component, angular range input component, angular ui components, igniteui for angular, infragistics
license	MIT

import { Aside } from '@astrojs/starlight/components'; import Sample from 'docs-template/components/mdx/Sample.astro'; import ApiLink from 'docs-template/components/mdx/ApiLink.astro';

Angular Slider Component Overview

The Ignite UI for Angular Slider is a form component which allows selection in a given range by moving a thumb along a track. The track can be defined as continuous or stepped and the slider can be configured so users can choose between single value and range (lower and upper value) slider types.

Angular Slider Example

Getting Started with Ignite UI for Angular Slider

To get started with the Ignite UI for Angular Slider component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxSliderModule in your app.module.ts file.

**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**.

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxSliderModule } from 'igniteui-angular/slider';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSliderModule, HammerModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxSliderComponent as a standalone dependency, or use the IGX_SLIDER_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular/slider';
// import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SLIDER_DIRECTIVES, FormsModule]
    /* or imports: [IgxSliderComponent, FormsModule] */
})
export class HomeComponent {
    public task: Task;
}

When using standalone components, HammerModule should be imported in the app.config file.

//app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';
import { HammerModule } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(HammerModule),
    provideRouter(appRoutes)
  ],
};

Now that you have the Ignite UI for Angular Slider module or directives imported, you can start using the igx-slider component.

Using the Angular Slider

Discrete Slider

By default, the Slider Component is set to discrete type. A discrete slider provides a visualization of the current value with a numeric label (bubble). The bubble can be shown upon hovering on the slider thumb.
You can also use the slider with predefined steps to track only meaningful values for the user.

In the following example, we define a discrete slider that displays values from 0% to 100% and the is set to 10% per increment/decrement.
We also bind the slider to a property in our component called "completion", using Angular ngModel, to allow two way binding with an input component.

{/*sample.component.html*/}

<igx-slider [minValue]="0" [maxValue]="100" [step]="10" [(ngModel)]="task.completion"></igx-slider>
<igx-input-group type="border">
    <input igxInput id="percentInput" type="number" [(ngModel)]="task.completion" />
    <label igxLabel for="percentInput">Task Completion</label>
    <igx-suffix>%</igx-suffix>
</igx-input-group>

// sample.component.ts 
import { Component, ViewChild } from '@angular/core';
import { IgxInputDirective } from 'igniteui-angular/input-group';
import { IgxSliderComponent } from 'igniteui-angular/slider';
// import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-sample',
    styleUrls: ['./sample.component.scss'],
    templateUrl: './sample.component.html'
})
export class SampleComponent {
    public task = {
        completion: 10
    };

    constructor() { }
}

We should now see two-way data binding between our two components.

Continuous Slider

First, specify the slider type by setting the input to true. Next, define the minimum and maximum values using and .

Continuous slider doesn't have step indicators over the track and visible thumb labels during interaction.

{/*sample.component.html*/}

<igx-slider 
    id="slider" 
    [minValue]="0" 
    [maxValue]="100" 
    [continuous]=true 
    [(ngModel)]="volume">
    </igx-slider>
<label igxLabel for="slider">Volume: {{volume}}</label>

Lets also bind the slider to a property in our component called "volume".

// sample.component.ts 

// Set an initial value
public volume = 20;

If the sample is configured properly, dragging the slider thumb should update the label below and the slider value should be limited between the specified minimum and maximum values:

Range Slider

First, set the slider to . Next, we bind the slider value to an object with properties for lower and upper values.

{/*sample.component.html*/}

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000" 
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper">
</igx-slider>

<igx-input-group type="border">
    <label igxLabel for="lowerRange">From</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="lowerRange" type="number" [(ngModel)]="priceRange.lower" />
</igx-input-group>

<igx-input-group type="border">
    <label igxLabel for="upperRange">To</label>
    <igx-prefix>$</igx-prefix>
    <input igxInput id="upperRange" type="number" [(ngModel)]="priceRange.upper" />
</igx-input-group>

// sample.component.ts
import { Component } from '@angular/core';
import { IgxSliderType } from 'igniteui-angular/slider';
// import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-sample',
  styleUrls: ['./sample.component.scss'],
  templateUrl: './sample.component.html'
})
export class SampleComponent {
  public sliderType = IgxSliderType;
  public priceRange = {
      lower: 200,
      upper: 800
  };

  constructor() { }
}

When using a slider of type RANGE, binding to `ngModel` will work only in the direction of updating the model from the slider. In order to use two-way binding for both values, you can take advantage of the `lowerValue` and `upperValue` bindings.

In some cases, values near to the minimum and maximum are not appropriate. You can further provide a useful range to limit the user choice along with setting and . This can be done by setting and . Now, the user will not be able to move the thumb in the range of 0 to 100 and in the range of 900 to 1000.

{/*sample.component.html*/}

<igx-slider 
    [type]="sliderType.RANGE" 
    [minValue]="0" 
    [maxValue]="1000"
    [(lowerValue)]="priceRange.lower"
    [(upperValue)]="priceRange.upper"
    [lowerBound]="100" 
    [upperBound]="900">
</igx-slider>

Labels mode

We've seen only numbers in the thumbs so far, although there is another approach that you could use in order to present information - by using an array of primitive values.

Your array of primitive values should contains at least two values, otherwise `labelsView` won't be enabled.

Once we have the definition that corresponds to the preceding rule, we are ready to give it to the labels input property, which would handle our data by spreading it equally over the track. Now, label values represent every primitive value we've defined in our collection. They could be accessed at any time through the API by requesting either or .

Please take into account the fact that when is enabled, your control over the , and inputs will be taken.

Another important factor is the way that the slider handles the update process when labelsView is enabled. It simply operates with the index(es) of the collection, which respectively means that the value, lowerBound and upperBound properties control the track by following/setting them (index(es)).

{/*sample.component.html*/}
<igx-slider #slider3 [type]="sliderType" [labels]="labels" [lowerBound]="1" [upperBound]="5">
    <ng-template igxSliderThumbFrom let-value let-labels="labels">
        <span class="ellipsis">{{ labels[value.lower] }}</span>
    </ng-template>
    <ng-template igxSliderThumbTo let-value let-labels="labels">
        <span class="ellipsis">{{ labels[value.upper] }}</span>
    </ng-template>
</igx-slider>

// sample.component.ts
public sliderType: SliderType = SliderType.RANGE;
public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

As we see from the sample above, setting boundaries is still a valid operation. Addressing and , limits the range you can slide through.

Labels templating

During the showcase above, we've intentionally shown how we can provide our custom label template, by using both and directives. Intuitively we can assume that corresponds to the and to the .
The here gives us implicitly a reference to the value input property and explicitly a reference to the labels input if labelsView is enabled.

  <ng-template igxSliderThumbFrom let-value let-labels="labels">
    <span class="ellipsis">{{ labels[value.lower] }}</span>
  </ng-template>
  <ng-template igxSliderThumbTo let-value let-labels="labels">
      <span class="ellipsis">{{ labels[value.upper] }}</span>
  </ng-template>

Slider Tick Marks & labels

Slider tick marks, provide a new and more appealing way for data visualization, like a particular timeframe, days of the week and more. With this new functionality, the users are not obliged to interact with the Angular Slider in order to see what data range is being represented. It is extremely flexible, with regards to the control over positioning and orientation of the tick marks and tick labels. The ticks can be turned on/off, as well as can be toggled between primary, secondary or both. In addition, this feature provides a way to turn on/of primary, secondary tick labels or both. Tick labels can change their rotation form horizontal to vertical (top to bottom (90) or bottom to top (-90)).

Enable ticks

We can enable the ticks of the slider by setting the to true. Use to set the number of primary ticks.
Use to set the number of secondary ticks.

{/*sample.component.html*/}

<igx-slider 
    id="slider" 
    [maxValue]="100" 
    [step]="10"
    [showTicks]="true" 
    [primaryTicks]="3" 
    [secondaryTicks]="4">
</igx-slider>

// sample.component.ts 

// Change slider type initial value
public type = SliderType.RANGE;

Labels orientation and visibility

In the following sample we disable all secondary labels by setting to false.

<igx-slider
    [step]="10"
    [type]="type"
    [maxValue]="100"
    [continuous]="true"
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="4"
    [secondaryTickLabels]="false"
    [tickLabelsOrientation]="labelsOrientation">
</igx-slider>

We also rotate all viable labels by setting the to

```typescript
... 
{
    public type = SliderType.RANGE:
    public labelsOrientation = TickLabelsOrientation.BottomToTop;
}
...

Ticks position

Let’s move on and see how to change the position of the ticks.

<div class="slider-container">

    <igx-slider
        [maxValue]="20"
        [showTicks]="true"
        [secondaryTicks]="21"
        [primaryTickLabels]="false"
        [ticksOrientation]="ticksOrientation">
    </igx-slider>
</div>

The position change has come from the input, which is changed from Bottom(default) to Mirror. This mirrors the visualization of the ticks and displays them above and below the slider.

  // The available options are: Top, Bottom and Mirror
  public ticksOrientation = TicksOrientation.Mirror;

Orientation

When the is set to Top or Mirror and there are visible tick labels the thumb label is hidden intentionally. This prevents a bad user experience and overlapping between the two labels.

Slider ticks with labels view

This example show how the tick labels and the thumb label works together.

<igx-slider
    [labels]="labels"
    [showTicks]="true"
    [secondaryTicks]="3"
></igx-slider>

  public type: SliderType = SliderType.RANGE;
  public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];

Here, the input has not been set, because it won’t be reflected in any way. The length of the collection takes precedence over it. This does not mean that cannot be set. All secondary ticks will be empty (without any labels).

Template labels

Lastly, we will see how we can provide a custom template for the tick labels and what the provides.

<igx-slider
    [showTicks]="true"
    [primaryTicks]="3"
    [secondaryTicks]="3">
    <ng-template igxSliderTickLabel let-value let-primary="isPrimary" let-idx="index">
        {{ tickLabel(value, primary, idx) }}
    </ng-template>
</igx-slider>

Applying to the ng-template assigns the template over all tick labels.

The executes per each tick.

Which means that it provides a reference to:

each corresponding tick value
If that tick is primary.
tick index.
And the collection if we have such one.

  public tickLabel(value, primary, index) {
      if (primary) {
          return Math.round(value);
      }

      return value;
  }

In the tickLabel callback above, we are rounding the value of every primary tick.

Styling

Slider Theme Property Map

When you modify a primary property, all related dependent properties are automatically updated to reflect the change:

Material Fluent Bootstrap Indigo

{/* Material Theme Table */}
<div class="theme-table material">

  <table class="collapsible-table">
    <thead>
      <tr>
        <th>Primary Property</th>
        <th>Dependent Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$track-color</strong></summary></details></td>
        <td>$thumb-color</td>
        <td>The color of the thumb.</td>
      </tr>
      <tr class="dependent"><td></td><td>$base-track-color</td><td>The base background color of the track.</td></tr>
      <tr class="dependent"><td></td><td>$track-hover-color</td><td>The color of the track on hover.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-fill-track-color</td><td>The base fill track color when disabled.</td></tr>
      <tr class="dependent"><td></td><td>$label-background-color</td><td>The background color of the bubble label.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$thumb-color</strong></summary></details></td>
        <td>$track-color</td>
        <td>The color of the track</td>
      </tr>
      <tr class="dependent"><td></td><td>$disabled-thumb-color</td><td>The thumb color when it is disabled.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$base-track-color</strong></summary></details></td>
        <td>$base-track-hover-color</td>
        <td>The base track color on hover.</td>
      </tr>
      <tr class="dependent"><td></td><td>$track-step-color</td><td>The color of the track steps.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-base-track-color</td><td>The base track color when disabled.</td></tr>
    </tbody>
  </table>

  <table class="collapsible-table">
    <thead>
      <tr>
        <th>Primary Property</th>
        <th>Dependent Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$thumb-border-color</strong></summary></details></td>
        <td>$track-color</td>
        <td>The color of the track</td>
      </tr>
      <tr class="dependent"><td></td><td>$thumb-border-hover-color</td><td>The thumb border color when hovered.</td></tr>
      <tr class="dependent"><td></td><td>$thumb-focus-color</td><td>The focus color of the thumb.</td></tr>
      <tr class="dependent"><td></td><td>$thumb-disabled-border-color</td><td>The thumb border color when disabled.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$track-color</strong></summary></details></td>
        <td>$thumb-border-color</td>
        <td>The thumb border color</td>
      </tr>
       <tr class="dependent"><td></td><td>$track-hover-color</td><td>The color of the track on hover.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-fill-track-color</td><td>The base fill track color when disabled.</td></tr>
      <tr class="dependent"><td></td><td>$label-background-color</td><td>The background color of the bubble label.</td></tr>
      <tr class="dependent"><td></td><td>$label-text-color</td><td>The text color of the bubble label.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$base-track-color</strong></summary></details></td>
        <td>$base-track-hover-color</td>
        <td>The base track color on hover.</td>
      </tr>
      <tr class="dependent"><td></td><td>$track-step-color</td><td>The color of the track steps.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-base-track-color</td><td>The base track color when disabled.</td></tr>
    </tbody>
  </table>

  <table class="collapsible-table">
    <thead>
      <tr>
        <th>Primary Property</th>
        <th>Dependent Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$thumb-color</strong></summary></details></td>
        <td>$thumb-border-color</td>
        <td>The thumb border color.</td>
      </tr>
      <tr class="dependent"><td></td><td>$thumb-focus-color</td><td>The focus color of the thumb.</td></tr>
      <tr class="dependent"><td></td><td>$track-color</td><td>The color of the track.</td></tr>
      <tr class="dependent"><td></td><td>$label-background-color</td><td>The background color of the bubble label.</td></tr>
      <tr class="dependent"><td></td><td>$label-text-color</td><td>The text color of the bubble label.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-thumb-color</td><td>The thumb color when it is disabled.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$track-color</strong></summary></details></td>
        <td>$track-hover-color</td>
        <td>The color of the track on hover.</td>
      </tr>
      <tr class="dependent"><td></td><td>$disabled-fill-track-color</td><td>The fill track color when disabled.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$base-track-color</strong></summary></details></td>
        <td>$base-track-hover-color</td>
        <td>The base track color on hover.</td>
      </tr>
      <tr class="dependent"><td></td><td>$track-step-color</td><td>The color of the track steps.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-base-track-color</td><td>The base track color when disabled.</td></tr>
    </tbody>
  </table>

  <table class="collapsible-table">
    <thead>
      <tr>
        <th>Primary Property</th>
        <th>Dependent Property</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$thumb-border-color</strong></summary></details></td>
        <td>$track-color</td>
        <td>The color of the track.</td>
      </tr>
      <tr class="dependent"><td></td><td>$thumb-border-hover-color</td><td>The thumb border color when hovered.</td></tr>
      <tr class="dependent"><td></td><td>$thumb-focus-color</td><td>The focus color of the thumb.</td></tr>
      <tr class="dependent"><td></td><td>$thumb-disabled-border-color</td><td>The thumb border color when disabled.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$track-color</strong></summary></details></td>
        <td>$thumb-border-color</td>
        <td>The thumb border color.</td>
      </tr>
      <tr class="dependent"><td></td><td>$track-hover-color</td><td>The color of the track on hover.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-fill-track-color</td><td>The base fill track color when disabled.</td></tr>
      <tr class="dependent"><td></td><td>$label-background-color</td><td>The background color of the bubble label.</td></tr>
      <tr class="dependent"><td></td><td>$label-text-color</td><td>The text color of the bubble label.</td></tr>
    </tbody>
    <tbody class="group">
      <tr class="primary">
        <td><details><summary><strong>$base-track-color</strong></summary></details></td>
        <td>$base-track-hover-color</td>
        <td>The base track color on hover.</td>
      </tr>
      <tr class="dependent"><td></td><td>$track-step-color</td><td>The color of the track steps.</td></tr>
      <tr class="dependent"><td></td><td>$disabled-base-track-color</td><td>The base track color when disabled.</td></tr>
    </tbody>
  </table>

To customize the Slider, you first need to import the index file, where all styling functions and mixins are located.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Next, we have to create a new theme that extends the slider-theme and pass the parameters which we'd like to change. By providing just the $track-color or $thumb-color parameter, the theme will automatically generate all related colors for the track and thumb, and their various interaction states.

You can also override additional properties, such as tick colors and labels, for more precise control.

$custom-slider-theme: slider-theme(
  $thumb-color: #ff7400,
  $tick-label-color: #b246c2,
  $tick-color: #b246c2
);

The last step is to include the newly created component theme in our application.

:host {
  @include tokens($custom-slider-theme);
}

Demo

This is the final result from applying our new theme.

Styling with Tailwind

You can style the slider using our custom Tailwind utility classes. Make sure to set up Tailwind first.

Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

The utility file includes both light and dark theme variants.

Use light-* classes for the light theme.
Use dark-* classes for the dark theme.
Append the component name after the prefix, e.g., light-slider, dark-slider.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

You can find the full list of properties in the IgxSlider Theme. The syntax is as follows:

<igx-slider
class="!light-slider ![--thumb-color:#7B9E89]"
>
</igx-slider>

The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

At the end your slider should look like this:

API References

IgxSliderComponent Styles

Our community is active and always welcoming to new ideas.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Angular Slider Component Overview

Angular Slider Example

Getting Started with Ignite UI for Angular Slider

Using the Angular Slider

Discrete Slider

Continuous Slider

Range Slider

Labels mode

Labels templating

Slider Tick Marks & labels

Enable ticks

Labels orientation and visibility

Ticks position

Orientation

Slider ticks with labels view

Template labels

Styling

Slider Theme Property Map

Demo

Styling with Tailwind

API References

Uh oh!

FilesExpand file tree

slider.mdx

Latest commit

History

slider.mdx

File metadata and controls

Angular Slider Component Overview

Angular Slider Example

Getting Started with Ignite UI for Angular Slider

Using the Angular Slider

Discrete Slider

Continuous Slider

Range Slider

Labels mode

Labels templating

Slider Tick Marks & labels

Enable ticks

Labels orientation and visibility

Ticks position

Orientation

Slider ticks with labels view

Template labels

Styling

Slider Theme Property Map

Demo

Styling with Tailwind

API References