<style include="cr-hidden-style">
:host {
--cr-slider-active-color: var(--google-blue-600);
--cr-slider-container-color: rgba(var(--google-blue-600-rgb), .24);
--cr-slider-container-disabled-color:
rgba(var(--google-grey-600-rgb), .24);
--cr-slider-disabled-color: var(--google-grey-600);
--cr-slider-knob-color-rgb: var(--google-blue-600-rgb);
--cr-slider-knob-disabled-color: white;
--cr-slider-marker-active-color: rgba(255, 255, 255, .54);
--cr-slider-marker-color: rgba(26, 115, 232, .54);
--cr-slider-marker-disabled-color: rgba(128, 134, 139, .54);
--cr-slider-position-transition: 80ms ease;
--cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .25);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: default;
height: 32px;
isolation: isolate;
outline: none;
padding: 0 16px;
user-select: none;
}
@media (prefers-color-scheme: dark) {
:host {
--cr-slider-active-color: var(--google-blue-300);
--cr-slider-container-color:
rgba(var(--google-blue-500-rgb), .48);
--cr-slider-container-disabled-color:
rgba(var(--google-grey-600-rgb), .48);
/* --cr-slider-disabled-color is the same in dark mode (GG600). */
--cr-slider-knob-color-rgb: var(--google-blue-300-rgb);
--cr-slider-knob-disabled-color:
var(--google-grey-900-white-4-percent);
--cr-slider-marker-active-color: var(--google-blue-300);
--cr-slider-marker-color: var(--google-blue-300);
--cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);
--cr-slider-ripple-color: rgba(var(--cr-slider-knob-color-rgb), .4);
}
}
/* Disable browser touch actions so that dragging via touch works
correctly. */
/* TODO(crbug.com/40125694): For reasons I don't understand we need to set
touch-action: none on the container for sliders inside dialogs and on
the host for sliders not in dialogs. If we don't, then you can't drag
the slider via touch (mouse works fine).*/
:host,
:host > #container {
touch-action: none;
}
#container,
#bar {
/* Using border instead of background-color to address pixel rounding
at low zoom levels (e.g. 33%). The browser will round border widths
to a minimum of 1px.*/
border-top-style: solid;
border-top-width: 2px;
}
#container {
border-top-color: var(--cr-slider-container-color);
position: relative;
top: 16px;
}
#container > div {
position: absolute;
}
#markers,
#bar {
top: -2px;
}
#markers {
display: flex;
flex-direction: row;
left: 0;
pointer-events: none;
right: 0;
}
.active-marker,
.inactive-marker {
flex: 1;
}
#markers::before,
#markers::after,
.active-marker::after,
.inactive-marker::after {
border-radius: 50%;
content: '';
display: block;
height: 2px;
margin-inline-start: -1px;
width: 2px;
}
#markers::before,
.active-marker::after {
background-color: var(--cr-slider-marker-active-color);
}
#markers::after,
.inactive-marker::after {
background-color: var(--cr-slider-marker-color);
}
#bar {
border-top-color: var(--cr-slider-active-color);
}
:host([transiting_]) #bar {
transition: width var(--cr-slider-position-transition);
}
#knobAndLabel {
top: -1px;
}
:host([transiting_]) #knobAndLabel {
transition: margin-inline-start var(--cr-slider-position-transition);
}
#knob {
background-color: rgb(var(--cr-slider-knob-color-rgb));
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
height: 10px;
outline: none;
position: relative;
transform: translate(-50%, -50%);
width: 10px;
}
:host([is-rtl_]) #knob {
transform: translate(50%, -50%);
}
#label {
background: rgb(var(--cr-slider-knob-color-rgb));
border-radius: .75em;
bottom: 22px;
color: white; /* Same for dark and light mode. */
font-size: 12px;
line-height: 1.5em;
opacity: 0;
/* TODO(crbug.com/40634687): Remove workaround after rendering bug is
* fixed. */
outline: 1px transparent solid;
padding: 0 .67em;
position: absolute;
transform: translateX(-50%);
transition: opacity 80ms ease-in-out;
white-space: nowrap;
}
:host([is-rtl_]) #label {
transform: translateX(50%);
}
:host(:hover) #label,
:host([show-label_]) #label {
opacity: 1;
}
paper-ripple {
--paper-ripple-opacity: var(--cr-slider-ripple-opacity, 1);
color: var(--cr-slider-ripple-color);
height: var(--cr-slider-ripple-size, 32px);
pointer-events: none;
transition: color linear 80ms;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: var(--cr-slider-ripple-size, 32px);
z-index: var(--cr-slider-ripple-z-index, auto);
}
:host([disabled_]) {
pointer-events: none;
}
:host([disabled_]) #container {
border-top-color: var(--cr-slider-container-disabled-color);
}
:host([disabled_]) #bar {
border-top-color: var(--cr-slider-disabled-color);
}
:host([disabled_]) .inactive-marker::after,
:host([disabled_]) #markers::after {
background-color: var(--cr-slider-marker-disabled-color);
}
:host([disabled_]) #knob {
background-color: var(--cr-slider-disabled-color);
border: 2px solid var(--cr-slider-knob-disabled-color);
box-shadow: unset;
}
</style>
<div id="container" hidden part="container">
<div id="bar"></div>
<div id="markers" hidden$="[[!markerCount]]">
<template is="dom-repeat" items="[[getMarkers_(markerCount)]]">
<div class$="[[getMarkerClass_(index, value, min, max,
markerCount)]]"></div>
</template>
</div>
<div id="knobAndLabel" on-transitionend="onTransitionEnd_">
<div id="knob" part="knob"></div>
<div id="label" part="label">[[label_]]</div>
</div>
</div>