Taiga UI 5.0 is out!

Slider CORE

Examples API GitHub

On this page

See also

InputNumber, InputSlider, InputRange, Range
Taiga UI styling of native html tag <input type='range' /> to choose a value from a limited range

Read more about this input type in MDN Docs

Size

Use css-variable --tui-thumb-size to customize radius of the thumb and track thickness.

Custom

    
      
    

      
      
    

  
    
      <input
    tuiSlider
    type="range"
    [formControl]="formControl"
/>

<p>Custom</p>

<input
    tuiSlider
    type="range"
    [formControl]="formControl"
    [style.--tui-thumb-size.rem]="1"
/>

Colors

Customizing colors of the filled track and thumb 
    
      
    

      
      
    

  
    
      <input
    tuiSlider
    type="range"
    value="65"
    class="first"
/>
<input
    tuiSlider
    type="range"
    value="80"
    class="second"
/>
<input
    tuiSlider
    type="range"
    value="40"
    class="third"
/>

    

      
      
    

  
    
      .first {
    color: var(--tui-chart-categorical-01);
}

.second {
    color: var(--tui-chart-categorical-03);
}

.third {
    color: var(--tui-chart-categorical-12);
}

Segments

Use mixin tui-slider-ticks-labels to place labels strictly below ticks

Control value: 250

    
      
    

      
      
    

  
    
      <input
    tuiSlider
    type="range"
    [formControl]="formControl"
    [max]="1000"
    [segments]="4"
    [step]="250"
/>

<div class="ticks-labels">
    @for (label of labels; track label) {
        <button
            type="button"
            class="tick-label"
            (click)="patchValue(label)"
        >
            ${{ label }}
        </button>
    }
</div>

<p>
    Control value:
    <code>{{ formControl.value }}</code>
</p>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

.ticks-labels {
    .tui-slider-ticks-labels();
}

.tick-label {
    .button-clear();

    outline: 0;
    cursor: pointer;
}

Disabled

Non interactive state 
    
      
    

      
      
    

  
    
      <input
    disabled
    tuiSlider
    type="range"
    value="80"
/>

KeySteps

Key steps – anchor points of non-uniform format between control's value and slider's position.

When [keySteps] property is enabled, [step] means percentage of total track length.

5 000100 000300 0001 000 000

Control value: 720,000

    
      
    

      
      
    

  
    
      <input
    tuiSlider
    type="range"
    [formControl]="formControl"
    [keySteps]="keySteps"
    [segments]="segments"
    [step]="100 / steps"
/>

<div class="ticks-labels">
    @for (label of labels; track label) {
        <span>{{ label }}</span>
    }
</div>

<p automation-id="key-steps-example-control-value">
    Control value:
    <code>{{ formControl.value | number }}</code>
</p>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: block;
    inline-size: 27rem;
}

.ticks-labels {
    .tui-slider-ticks-labels();
}

Complex

Use tuiSliderThumbLabel for positioning any content so it slides alongside the thumb. 
    
      
    

      
      
    

  
    
      <section class="zoom-controller">
    <button
        appearance="icon"
        iconStart="@tui.minus"
        size="xs"
        tuiIconButton
        type="button"
        class="minus"
        (click)="change(-0.25)"
    >
        Minus
    </button>

    <label
        tuiSliderThumbLabel
        class="slider-wrapper"
    >
        <div
            [tuiHint]="value | percent"
            [tuiHintManual]="!!(showHint$ | async)"
        ></div>

        <input
            step="any"
            tuiSlider
            type="range"
            [max]="max"
            [min]="min"
            [(ngModel)]="value"
        />
    </label>

    <button
        appearance="icon"
        iconStart="@tui.plus"
        size="xs"
        tuiIconButton
        type="button"
        class="plus"
        (click)="change(+0.25)"
    >
        Plus
    </button>
</section>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

@border-radius: 1rem;

.zoom-controller {
    display: flex;
    border-radius: @border-radius;
    background: var(--tui-background-neutral-1-pressed);
    block-size: var(--tui-height-s);
    justify-content: space-between;
    align-items: center;
    max-inline-size: 18rem;
    padding: 0 0.25rem;
    gap: 0.5rem;

    @media @tui-mobile {
        max-inline-size: 100%;
    }
}

.slider-wrapper {
    flex: 1;
}

.minus {
    border-radius: @border-radius 0 0 @border-radius;
}

.plus {
    border-radius: 0 @border-radius @border-radius 0;
}

Vertical

Vertical orientation can be achieved using CSS transformations. 
    
      
    

      
      
    

  
    
      <button
    appearance="icon"
    iconStart="@tui.volume-2"
    size="s"
    tuiDropdown
    tuiDropdownAppearance="neutral"
    tuiDropdownAuto
    tuiDropdownDirection="top"
    tuiDropdownLimitWidth="fixed"
    tuiIconButton
    type="button"
>
    Volume
    <input
        *tuiDropdown
        tuiSlider
        type="range"
        [(ngModel)]="value"
    />
</button>

    

      
      
    

  
    
      tui-dropdown[data-appearance] {
    min-block-size: 8rem;
    background: var(--tui-background-neutral-1);
    box-shadow: none;
    border: none;
    backdrop-filter: blur(1rem);

    [tuiSlider] {
        position: absolute;
        inline-size: 7rem;
        transform-origin: left;
        transform: rotate(-90deg) translate(-100%, 1rem);

        // chromium browsers
        &::-webkit-slider-thumb {
            cursor: ns-resize;
        }

        // firefox
        &::-moz-range-thumb {
            cursor: ns-resize;
        }
    }
}
GitHub StackBlitz