@vaadin/vaadin-lumo-styles/src/components/range-slider.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2026 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_range-slider {
  :host(:not([readonly]):is([start-active], [focus-ring][start-focused])) [part~='thumb-start'],
  :host(:not([readonly]):is([end-active], [focus-ring][end-focused])) [part~='thumb-end'] {
    background: linear-gradient(var(--_fill-background), var(--_fill-background)) var(--lumo-base-color);
  }

  :host([focus-ring][start-focused]) [part~='thumb-start'],
  :host([focus-ring][end-focused]) [part~='thumb-end'] {
    outline: var(--_focus-ring-width) solid var(--_focus-ring-color);
  }
}