@telekom/scale-components/dist/collection/components/slider/slider.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --width: 368px;
  --height-track: 6px;
  --background-track: var(--telekom-color-ui-faint);
  --radius-track: var(--telekom-radius-pill);
  --spacing-track: var(--telekom-spacing-composition-space-07) 0
    var(--telekom-spacing-composition-space-06);
  --spacing-x-inner-track: 10px;
  --background-bar: var(--telekom-color-primary-standard);
  --radius-thumb: var(--telekom-radius-circle);
  --size-thumb: 24px;
  --border-color-thumb: rgba(0, 0, 0, 0.05);
  --background-thumb: var(--telekom-color-ui-white);
  --shadow-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 2px 4px 0 rgba(0, 0, 0, 0.24),
    0 4px 12px 0 rgba(0, 0, 0, 0.26);
  --color-focus: var(--telekom-color-functional-focus-standard);
  --spacing-x-step-marks: 8px;
  --color-step-mark: var(--telekom-color-text-and-icon-additional);
  --radius-step-mark: var(--telekom-radius-circle);
  --size-step-mark: 4px;
  --font-label: var(--telekom-text-style-ui);
  --font-helper-text: var(--telekom-text-style-small-bold);
  --color-helper-text: var(--telekom-color-text-and-icon-additional);
}

[part~='base'] {
  width: var(--width);
}

[part='label-wrapper'] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

[part='label'] {
  font: var(--font-label);
}

[part='value-text'] {
  font: var(--font-label);
  font-variant-numeric: tabular-nums;
}

[part='track-wrapper'] {
  display: flex;
  position: relative;
  align-items: center;
}

[part='track'] {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: var(--spacing-track);
  width: 100%;
  height: var(--height-track);
  background: var(--background-track);
  border-radius: var(--radius-track);
  border: 1px solid transparent;
}

/* Really holds the thumb, adding some spacing on the sides */
[part='inner-track'] {
  position: absolute;
  display: flex;
  align-items: center;
  left: var(--spacing-x-inner-track);
  width: calc(100% - var(--spacing-x-inner-track) * 2);
  height: 100%;
}

[part='bar'] {
  height: 100%;
  position: absolute;
  z-index: 1;
  border-radius: var(--radius-track);
  background-color: var(--background-bar);
  /* to cover the transparent border in the track */
  border: 1px solid transparent;
}

[part~='thumb-wrapper'] {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  background-color: transparent;
}

[part~='thumb'] {
  --_border: 0 0 0 var(--telekom-spacing-composition-space-01)
    var(--border-color-thumb);
  width: var(--size-thumb);
  height: var(--size-thumb);
  box-sizing: border-box;
  border-radius: var(--radius-thumb);
  background-color: var(--background-thumb);
  box-shadow: var(--_border), var(--shadow-thumb);
  border: 1px solid transparent;
}

[part~='thumb']:focus {
  outline: var(--telekom-line-weight-highlight) solid var(--color-focus);
  outline-offset: 1px;
}

[part='step-marks'] {
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-x-step-marks);
}

[part='step-mark'] {
  width: var(--size-step-mark);
  height: var(--size-step-mark);
  background: var(--color-step-mark);
  border-radius: var(--telekom-radius-circle);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  [part='step-mark'] {
    border: 2px solid;
  }
}

[part='meta'] {
  display: flex;
  justify-content: space-between;
}

[part='helper-text'] {
  font: var(--font-helper-text);
  color: var(--color-helper-text);
}

/* disabled */

/* TODO can this be overwritten? it should... */
[part~='disabled'] [part='label-wrapper'],
[part~='disabled'] [part='helper-text'] {
  color: var(--telekom-color-text-and-icon-disabled);
}

[part~='disabled'] [part='bar'] {
  background-color: var(--telekom-color-ui-border-disabled);
}

[part~='disabled'] [part~='thumb-wrapper'] {
  display: none;
}

/* cursor */

[part~='thumb-wrapper']:hover {
  cursor: grab;
}

[part~='thumb-wrapper']:active {
  cursor: grabbing;
}

[part~='disabled'] [part='track-wrapper'] {
  cursor: not-allowed;
}

/*
  :host-context() is not widely supported yet
  that's why the rules for the platform are duplicated
*/

/* PLATFORM iOS */

:host-context([data-platform='ios']) {
  --height-track: 4px;
  --size-thumb: 26px;
  --size-step-mark: 2px;
}
:host([platform='ios']) {
  --height-track: 4px;
  --size-thumb: 26px;
  --size-step-mark: 2px;
}

/* PLATFORM Android */

:host-context([data-platform='android']) {
  --background-thumb: var(--telekom-color-primary-standard);
}
:host([platform='android']) {
  --background-thumb: var(--telekom-color-primary-standard);
}

:host-context([data-platform='android']) [part~='thumb'] {
  box-shadow: var(--_border), var(--telekom-shadow-raised-standard);
}
:host([platform='android']) [part~='thumb'] {
  box-shadow: var(--_border), var(--telekom-shadow-raised-standard);
}