@mussonindustrial/pyro-mui-joy/src/components/slider.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

/* Slider generates a background element that can be used for various purposes. */
.ia-slider {
    @include variant-support(Slider);

    --joy-Slider-size: max(
        42px,
        max(var(--joy-Slider-thumbSize), var(--joy-Slider-trackSize))
    );
    --joy-Slider-trackRadius: var(--joy-Slider-size);
    --joy-Slider-markBackground: var(--joy-palette-text-tertiary);

    /* Default to medium size */
    --joy-Slider-markSize: 2px;
    --joy-Slider-trackSize: 6px;
    --joy-Slider-thumbSize: 14px;
    --joy-Slider-valueLabelArrowSize: 8px;

    --joy-Slider-thumbRadius: calc(var(--joy-Slider-thumbSize) / 2);
    --joy-Slider-thumbWidth: var(--joy-Slider-thumbSize);
    --joy-Slider-thumbBackground: var(--joy-Slider-Color);
    --joy-Slider-thumbColor: var(--joy-Slider-Bg);

    --joy-Slider-trackColor: var(--joy-Slider-Color);
    --joy-Slider-trackBackground: var(--joy-Slider-Bg);
    --joy-Slider-trackBorderColor: var(--joy-Slider-Border);

    --joy-Slider-railBackground: var(--joy-palette-background-level2);

    &[psc='Joy/Variant/plain'],
    &[psc='Joy/Variant/outlined'] {
        --joy-Slider-thumbColor: var(--joy-palette-background-surface);
        --joy-Slider-trackBackground: var(--joy-palette-background-surface);
    }

    &:hover {
        @include component-state(Slider, Hover);
    }

    &:active {
        @include component-state(Slider, Active);
    }

    .slider:not(.slider-vertical) {
        .slider-rail {
            height: var(--joy-Slider-trackSize);
        }

        .slider-track {
            height: var(--joy-Slider-trackSize);
            width: 100%;
            border-radius: var(--joy-Slider-trackRadius) 0 0
                var(--joy-Slider-trackRadius);
        }

        .slider-handle {
            margin-left: calc(var(--joy-Slider-thumbWidth) / 2 * -1);
            margin-top: calc(var(--joy-Slider-thumbWidth) / 4 * -1);
        }
    }

    .slider.slider-vertical {
        .slider-rail {
            width: var(--joy-Slider-trackSize);
        }

        .slider-track {
            height: 100%;
            width: var(--joy-Slider-trackSize);
            border-radius: 0 0 var(--joy-Slider-trackRadius)
                var(--joy-Slider-trackRadius);
        }

        .slider-handle {
            margin-left: calc(var(--joy-Slider-thumbWidth) / 4 * -1);
            margin-bottom: calc(var(--joy-Slider-thumbWidth) / 2 * -1);
        }
    }

    .slider-rail {
        background-color: var(--joy-Slider-railBackground);
        border-radius: var(--joy-Slider-trackRadius);
    }

    .slider-track {
        color: var(--joy-Slider-trackColor);
        background-color: var(--joy-Slider-trackBackground);

        border-width: var(--joy-variant-borderWidth, 0px);
        border-style: var(--joy-variant-borderStyle);
        border-color: var(--joy-Slider-trackBorderColor);
        border-radius: var(--joy-Slider-trackRadius) 0 0
            var(--joy-Slider-trackRadius);
    }

    .slider .slider-handle {
        width: var(--joy-Slider-thumbWidth);
        height: var(--joy-Slider-thumbSize);

        color: var(--joy-Slider-thumbColor);
        background-color: var(--joy-Slider-thumbBackground);

        border: var(--joy-variant-borderWidth, 0px) solid
            var(--joy-Slider-trackBorderColor);
        border-radius: var(--joy-Slider-thumbRadius);

        box-shadow: var(--joy-Slider-thumbShadow);

        background-color: var(--joy-Slider-thumbBackground);

        cursor: pointer;
        overflow: visible;

        &:before {
            content: '';
            box-sizing: border-box;
            display: block;
            position: absolute;
            background: transparent;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid;
            border-color: var(--joy-Slider-thumbColor);
            border-radius: inherit;
        }
    }
}

[psc='Joy/Size/sm'] .ia-slider,
[psc='Joy/Size/sm'].ia-slider {
    --joy-Slider-markSize: 2px;
    --joy-Slider-trackSize: 4px;
    --joy-Slider-thumbSize: 10px;
    --joy-Slider-valueLabelArrowSize: 6px;
}

[psc='Joy/Size/md'] .ia-slider,
[psc='Joy/Size/md'].ia-slider {
    --joy-Slider-markSize: 2px;
    --joy-Slider-trackSize: 6px;
    --joy-Slider-thumbSize: 14px;
    --joy-Slider-valueLabelArrowSize: 8px;
}

[psc='Joy/Size/lg'] .ia-slider,
[psc='Joy/Size/lg'].ia-slider {
    --joy-Slider-markSize: 3px;
    --joy-Slider-trackSize: 10px;
    --joy-Slider-thumbSize: 20px;
    --joy-Slider-valueLabelArrowSize: 10px;
}