<style>
:host {
cursor: default;
font-weight: 500;
text-align: center;
user-select: none;
}
#sliderContainer {
display: inline-block;
position: relative;
user-select: none;
width: 100%;
}
#sliderBar {
background-color: rgba(var(--cros-button-background-color-primary-rgb), .24);
background-size: 100%;
display: inline-block;
height: 2px;
position: relative;
width: inherit;
}
.knob {
height: 32px;
margin-inline-start: -16px;
margin-top: -15px;
position: absolute;
width: 32px;
z-index: 3;
}
.knob:focus {
outline: none;
}
.knob-inner {
background: var(--cros-button-background-color-primary);
border-radius: 6px;
height: 10px;
left: 0;
margin: 11px;
position: absolute;
width: 10px;
z-index: 3;
}
.knob-inner:focus {
outline: none;
}
#progressContainer {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.progress {
background: var(--cros-button-background-color-primary);
height: 100%;
position: absolute;
z-index: 1;
}
#labelContainer {
height: 1.75em;
}
.label {
background: var(--cros-button-background-color-primary);
border-radius: 14px;
color: var(--cros-bg-color);
font-size: 12px;
left: 0;
line-height: 1.5em;
margin-inline-start: -2.5em;
position: absolute;
text-align: center;
transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1);
vertical-align: middle;
width: 5em;
}
.end-label-overlap {
margin-top: -2em;
}
#markersContainer {
display: flex;
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
.active-marker,
.inactive-marker {
border-radius: 50%;
display: block;
height: 100%;
margin-inline-start: -1px;
padding: 0;
position: absolute;
width: 2PX;
z-index: 2;
}
.active-marker {
background-color: rgba(var(--cros-bg-color-rgb), 0.6);
}
.inactive-marker {
--background-color-opacity: 0.6;
background-color: rgba(
var(--cros-button-background-color-primary-rgb),
var(--background-color-opacity));
}
@media(prefers-color-scheme: dark) {
.inactive-marker {
--background-color-opacity: 1;
}
}
#legendContainer {
height: 10px;
margin-bottom: 40px;
position: relative;
width: inherit;
}
#legendContainer > div {
color: var(--cros-text-color-secondary);
font-size: 12px;
margin-inline-start: -2.5em;
position: absolute;
text-align: center;
top: 5px;
width: 5em;
}
paper-ripple {
color: var(--cros-button-background-color-primary);
}
</style>
<div id="sliderContainer">
<div id="labelContainer">
<div id="startLabel" class="label" aria-hidden="true">
[[getTimeString_(prefStartTime.value, shouldUse24Hours_, prefs.*)]]
</div>
<div id="endLabel" class="label" aria-hidden="true">
[[getTimeString_(prefEndTime.value, shouldUse24Hours_, prefs.*)]]
</div>
</div>
<div id="sliderBar">
<div id="progressContainer">
<div id="endProgress" class="progress"></div>
<div id="startProgress" class="progress"></div>
</div>
<div id="markersContainer">
</div>
<div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
on-up="endDrag_" on-track="continueDrag_"
aria-label="[[getAriaLabelStartTime_(
prefStartTime, shouldUse24Hours_, prefs.*)]]">
<div class="knob-inner" tabindex="-1"></div>
</div>
<div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
on-up="endDrag_" on-track="continueDrag_"
aria-label="[[getAriaLabelEndTime_(
prefEndTime, shouldUse24Hours_, prefs.*)]]">
<div class="knob-inner" tabindex="-1"></div>
</div>
</div>
<div id="legendContainer">
<div style$="[[getLegendStyle_(0, isRTL_)]]">
[[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
</div>
<div style$="[[getLegendStyle_(25, isRTL_)]]">
[[getLocaleTimeString_(0, 0, shouldUse24Hours_)]]
</div>
<div style$="[[getLegendStyle_(50, isRTL_)]]">
[[getLocaleTimeString_(6, 0, shouldUse24Hours_)]]
</div>
<div style$="[[getLegendStyle_(75, isRTL_)]]">
[[getLocaleTimeString_(12, 0, shouldUse24Hours_)]]
</div>
<div style$="[[getLegendStyle_(100, isRTL_)]]">
[[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
</div>
</div>
<div id="dummyRippleContainer" hidden></div>
</div>