@taiga-ui/core/styles/mixins/slider.less

Core library for creating Angular components and applications using Taiga UI

@thumb-diameters: {
    @s: 0.5rem;
    @m: 0.75rem;
};

.tui-slider-ticks-labels(@input-size: m) {
    @first-tick-center: (@thumb-diameters[@@input-size] / 2);

    display: flex;
    margin: 0 @first-tick-center;
    font: var(--tui-font-text-s);

    & > * {
        position: relative;
        flex: 2;
        text-align: center;

        &:first-child {
            left: -@first-tick-center;
            inset-inline-start: -@first-tick-center;
            flex: 1;
            text-align: start;
        }

        &:last-child {
            right: -@first-tick-center;
            flex: 1;
            text-align: end;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: -@first-tick-center;
            }
        }
    }

    tui-textfield + &, /* TODO: add :has([tuiInputSlider]) */
    tui-input-slider + & {
        margin-inline-start: calc(var(--tui-radius-m) / 2 + @first-tick-center);
    }

    tui-input-range + &,
    tui-range + & {
        @thumb: @thumb-diameters[@@input-size];

        margin-inline-start: @thumb;
        margin-inline-end: @thumb;

        & > * {
            &:first-child {
                left: -@thumb;
                inset-inline-start: -@thumb;
            }

            &:last-child {
                right: -@thumb;

                @supports (inset-inline-end: 0) {
                    right: unset;
                    inset-inline-end: -@thumb;
                }
            }
        }
    }
}