@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;
    @l: 0.75rem;
};

@track-inset: {
    @s: 0.625rem;
    @m: 0.75rem;
    @l: 1rem;
};

// TODO(v5): use `l` by default (default size for new textfields)
.tui-slider-ticks-labels(@input-size: m) {
    @thumb: @thumb-diameters[@@input-size];

    --t-offset: calc(@thumb / 2);

    display: flex;
    font: var(--tui-font-text-s);
    margin-inline-start: var(--t-offset);
    margin-inline-end: var(--t-offset);

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

        &:first-child {
            left: calc(-1 * var(--t-offset));
            inset-inline-start: calc(-1 * var(--t-offset));
            flex: 1;
            text-align: start;
        }

        &:last-child {
            right: calc(-1 * var(--t-offset));
            flex: 1;
            text-align: end;

            @supports (inset-inline-end: 0) {
                right: unset;
                inset-inline-end: calc(-1 * var(--t-offset));
            }
        }
    }

    /* TODO(v5): delete */
    tui-input-slider + & {
        margin-inline-start: calc(var(--tui-radius-m) / 2 + var(--t-offset));
    }

    tui-input-range:not([new]) + &, /* TODO(v5): delete */
    tui-range + & {
        --t-offset: @thumb;
    }

    /* TODO: add :has([tuiInputSlider]) */
    tui-textfield + & {
        --t-offset: calc(@track-inset[@@input-size] + @thumb / 2);
    }

    tui-input-range[new] + & {
        --t-offset: calc(@track-inset[@@input-size] + @thumb);
    }
}