@stihl-design-system/components/assets/Slider.Bidyhb-B.css

Welcome to the STIHL Design System react component library.

:where(.ds-slider_root_13uvg_1){align-self:end}.ds-slider_root_13uvg_1{min-width:256px}.ds-slider_root_13uvg_1:has(.ds-slider_hint_13uvg_13) .ds-slider_label_13uvg_13{margin-block-end:4px}.ds-slider_root_13uvg_1:has(.ds-slider_hint_13uvg_13) .ds-slider_number-input_13uvg_16{grid-row-end:span 2}.ds-slider_label-hint-input-wrapper_13uvg_20{display:grid;grid-template-columns:1fr max-content;align-items:center;margin-block-end:14px}.ds-slider_label_13uvg_13{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.25;font-size-adjust:.414;display:block;max-width:fit-content}.ds-slider_label--hidden_13uvg_40{border:0;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;text-indent:-999999px;white-space:nowrap}@media screen and (forced-colors: active){.ds-slider_label--disabled_13uvg_53{color:GrayText}}.ds-slider_hint_13uvg_13{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414;display:block;max-width:34em;grid-row-start:2;grid-row-end:span 1}.ds-slider_number-input_13uvg_16{justify-self:end;grid-row-start:0;grid-row-end:span 1;margin-inline-start:32px;max-width:150px;min-width:64px}.ds-slider_number-input--small_13uvg_82{min-width:44px;max-width:115px}.ds-slider_min-max-label-wrapper_13uvg_87{font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414;display:flex;justify-content:space-between}@media screen and (forced-colors: active){.ds-slider_min-max-label-wrapper--disabled_13uvg_101{color:GrayText}}.ds-slider_min-label_13uvg_106{transform:translate(calc(12px - 50%))}.ds-slider_max-label_13uvg_110{transform:translate(calc(-12px + 50%))}.ds-slider_slider-wrapper_13uvg_114{position:relative;min-height:26px}.ds-slider_slider_13uvg_114{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:24px;margin:0;position:absolute;margin-block-start:2px}.ds-slider_slider_13uvg_114:hover~.ds-slider_value-tooltip_13uvg_138,.ds-slider_slider_13uvg_114:active~.ds-slider_value-tooltip_13uvg_138,.ds-slider_slider_13uvg_114:focus-visible~.ds-slider_value-tooltip_13uvg_138{opacity:100%}@media (hover: hover){.ds-slider_slider_13uvg_114:hover:not(:disabled)~.ds-slider_proxy-thumb_13uvg_142{background-color:#ededed}}.ds-slider_slider_13uvg_114:focus{outline:none}@supports selector(:focus-visible){.ds-slider_slider_13uvg_114:focus~.ds-slider_proxy-thumb_13uvg_142{outline:revert;outline-offset:revert}.ds-slider_slider_13uvg_114:focus-visible~.ds-slider_proxy-thumb_13uvg_142{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-slider_slider_13uvg_114:focus-visible~.ds-slider_proxy-thumb_13uvg_142{forced-color-adjust:auto;outline-color:Highlight}}}.ds-slider_slider_13uvg_114:disabled{cursor:not-allowed}.ds-slider_slider_13uvg_114::-webkit-slider-runnable-track{visibility:hidden}.ds-slider_slider_13uvg_114::-moz-range-track{visibility:hidden}.ds-slider_slider_13uvg_114::-webkit-slider-thumb{opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;height:24px;width:24px;border-radius:50%}.ds-slider_slider_13uvg_114::-moz-range-thumb{opacity:0;border:1px solid transparent;height:24px;width:24px;border-radius:50%}.ds-slider_proxy-thumb_13uvg_142{background-color:#fff;border:1px solid #252525;height:24px;width:24px;border-radius:50%;z-index:2;position:absolute;pointer-events:none;top:calc(50% + 1px);left:calc(var(--ds-input-slider-thumb-position) * 1% - 24 * (var(--ds-input-slider-thumb-position) * 1px / 100 - .5px));transform:translate(-50%,-50%)}.ds-slider_proxy-thumb--disabled_13uvg_209{background-color:#fff;border-color:#00000080}.ds-slider_proxy-thumb--disabled_13uvg_209:hover{background-color:#fff}@media screen and (forced-colors: active){.ds-slider_proxy-thumb_13uvg_142{border-color:Highlight}.ds-slider_proxy-thumb--disabled_13uvg_209{background-color:GrayText;border-color:GrayText}.ds-slider_proxy-thumb--disabled_13uvg_209:hover{background-color:GrayText}}.ds-slider_proxy-thumb_13uvg_142{transition:background-color var(--ds-animation-duration, .1s) cubic-bezier(.5,0,.5,1)}@media (prefers-reduced-motion: reduce){.ds-slider_proxy-thumb_13uvg_142{transition-duration:0ms}}.ds-slider_custom-track_13uvg_238{position:absolute;z-index:1;pointer-events:none}.ds-slider_custom-track--progress_13uvg_243{background-color:#e9640c;height:8px;top:10px;border-top-left-radius:4px;border-bottom-left-radius:4px}@media screen and (forced-colors: active){.ds-slider_custom-track--progress_13uvg_243{background-color:Highlight}}.ds-slider_custom-track--runnable_13uvg_255{background-color:#8c8c8c;height:6px;top:11px;right:0;border-top-right-radius:3px;border-bottom-right-radius:3px;border:1px solid transparent}@media screen and (forced-colors: active){.ds-slider_custom-track--runnable_13uvg_255{border-color:CanvasText}}.ds-slider_custom-track--disabled_13uvg_269{background-color:#0000001a}@media screen and (forced-colors: active){.ds-slider_custom-track--disabled_13uvg_269{border-color:CanvasText}}.ds-slider_custom-track--disabled_13uvg_269.ds-slider_custom-track--progress_13uvg_243{height:6px;top:11px}@media screen and (forced-colors: active){.ds-slider_custom-track--disabled_13uvg_269.ds-slider_custom-track--progress_13uvg_243{background-color:GrayText;border-color:GrayText}}.ds-slider_tick-wrapper_13uvg_289{position:absolute;top:calc(50% - 2px);width:100%;height:6px;pointer-events:none;z-index:1}.ds-slider_tick_13uvg_289{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;background-color:#fff;transform:translateY(-50%)}@media screen and (forced-colors: active){.ds-slider_tick_13uvg_289{background-color:Highlight}}:where(.ds-slider_value-tooltip_13uvg_138){font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414;opacity:0;z-index:3;color:#fff;background-color:#444;border:1px solid transparent;padding-block:3px;padding-inline:5px;min-width:32px;min-height:24px;text-align:center;position:absolute;left:calc(var(--ds-input-slider-thumb-position) * 1% - 24 * (var(--ds-input-slider-thumb-position) * 1px / 100 - .5px));transform:translate(-50%,-26px)}:where(.ds-slider_value-tooltip_13uvg_138){transition:opacity var(--ds-animation-duration, .1s) cubic-bezier(.5,0,.5,1)}@media (prefers-reduced-motion: reduce){:where(.ds-slider_value-tooltip_13uvg_138){transition-duration:0ms}}.ds-slider_value-tooltip--visible_13uvg_348{opacity:100%}.ds-slider_value-tooltip--disabled_13uvg_351{color:#00000080;background-color:#dadada}@media screen and (forced-colors: active){.ds-slider_value-tooltip--disabled_13uvg_351{color:GrayText}}.ds-slider_value-tooltip--disabled_13uvg_351:after{background-color:#dadada}