@eclipse-scout/core/src/slider/Slider.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */

.slider {
  --track-size: 6px;
  --track-border-radius: 4px;
  --track-background-color: @slider-track-background-color;
  --track-disabled-background-color: @slider-track-disabled-background-color;
  --track-color: @slider-track-color;
  --track-disabled-color: @slider-track-disabled-color;

  --thumb-size: 18px;
  --thumb-hitbox-padding: 4px;
  --thumb-border-width: 1px;
  --thumb-color: @slider-thumb-color;
  --thumb-border-color: @slider-thumb-border-color;
  --thumb-active-color: @slider-thumb-active-color;
  --thumb-active-border-color: @slider-thumb-active-border-color;
  --thumb-disabled-color: @slider-thumb-disabled-color;
  --thumb-disabled-border-color: @slider-thumb-disabled-border-color;

  position: relative;
  background-color: var(--track-background-color);
  border-radius: var(--track-border-radius);
  user-select: none;
  height: var(--track-size);

  // for a bigger hit box
  &::before {
    content: '';
    position: absolute;
    top: calc(-1 * (var(--thumb-size) - var(--track-size)) / 2);
    height: var(--thumb-size);
    left: 0;
    right: 0;
  }

  &.disabled {
    background-color: var(--track-disabled-background-color);

    .slider-track {
      background-color: var(--track-disabled-color);
    }

    .slider-thumb {
      background-color: var(--thumb-disabled-color);
      border-color: var(--thumb-disabled-border-color);
    }
  }

  &:not(.disabled) {
    cursor: pointer;

    & .slider-thumb {
      #scout.drop-shadow(@y: 1px, @blur: 2px);
    }

    &:active .slider-thumb {
      background-color: var(--thumb-active-color);
      border-color: var(--thumb-active-border-color);
    }

    &.focused.keyboard-navigation .slider-thumb,
    &:focus.keyboard-navigation .slider-thumb {
      #scout.focus-border();
    }
  }

  .slider-track {
    position: absolute;
    height: 100%;
    background-color: var(--track-color);
    border-radius: var(--track-border-radius);
  }

  .slider-thumb {
    position: absolute;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background-color: var(--thumb-color);
    border: var(--thumb-border-width) solid var(--thumb-border-color);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    // for a bigger hit box
    &::before {
      --offset: calc(-1 * var(--thumb-hitbox-padding));
      --size: calc(var(--thumb-size) + 2 * var(--thumb-hitbox-padding));

      content: '';
      position: absolute;
      top: var(--offset);
      left: var(--offset);
      height: var(--size);
      width: var(--size);
      border-radius: 50%;
    }
  }
}