.v-slider-track__background { background-color: rgb(var(--v-theme-surface-variant)); } .v-slider-track__fill { background-color: rgb(var(--v-theme-surface-variant)); } .v-slider-track__tick { background-color: rgb(var(--v-theme-surface-variant)); } .v-slider-track__tick--filled { background-color: rgb(var(--v-theme-surface-light)); } .v-slider-track { border-radius: 6px; } .v-slider-track__background, .v-slider-track__fill { position: absolute; transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); border-radius: inherit; } .v-slider--pressed .v-slider-track__background, .v-slider--pressed .v-slider-track__fill { transition: none; } .v-input--error:not(.v-input--disabled) .v-slider-track__background, .v-input--error:not(.v-input--disabled) .v-slider-track__fill { background-color: currentColor; } .v-slider-track__ticks { height: 100%; width: 100%; position: relative; } .v-slider-track__tick { position: absolute; opacity: 0; transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; width: var(--v-slider-tick-size); height: var(--v-slider-tick-size); transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2)); } .v-locale--is-ltr.v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-ltr .v-slider-track__tick--first .v-slider-track__tick-label { transform: none; } .v-locale--is-rtl.v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-rtl .v-slider-track__tick--first .v-slider-track__tick-label { transform: translateX(100%); } .v-locale--is-ltr.v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-ltr .v-slider-track__tick--last .v-slider-track__tick-label { transform: translateX(-100%); } .v-locale--is-rtl.v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-rtl .v-slider-track__tick--last .v-slider-track__tick-label { transform: none; } .v-slider-track__tick-label { position: absolute; user-select: none; white-space: nowrap; } .v-slider.v-input--horizontal .v-slider-track { display: flex; align-items: center; width: 100%; height: calc(var(--v-slider-track-size) + 2px); touch-action: pan-y; } .v-slider.v-input--horizontal .v-slider-track__background { height: var(--v-slider-track-size); } .v-slider.v-input--horizontal .v-slider-track__fill { height: inherit; } .v-slider.v-input--horizontal .v-slider-track__tick { margin-top: calc(calc(var(--v-slider-track-size) + 2px) / 2); } .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick { transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2)); } .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label { margin-top: calc(var(--v-slider-track-size) / 2 + 8px); } .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label { transform: translateX(-50%); } .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label { transform: translateX(50%); } .v-slider.v-input--horizontal .v-slider-track__tick--first { margin-inline-start: calc(var(--v-slider-tick-size) + 1px); } .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label { transform: translateX(0%); } .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label { transform: translateX(0%); } .v-slider.v-input--horizontal .v-slider-track__tick--last { margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px); } .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label { transform: translateX(-100%); } .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label { transform: translateX(100%); } .v-slider.v-input--vertical .v-slider-track { height: 100%; display: flex; justify-content: center; width: calc(var(--v-slider-track-size) + 2px); touch-action: pan-x; } .v-slider.v-input--vertical .v-slider-track__background { width: var(--v-slider-track-size); } .v-slider.v-input--vertical .v-slider-track__fill { width: inherit; } .v-slider.v-input--vertical .v-slider-track__ticks { height: 100%; } .v-slider.v-input--vertical .v-slider-track__tick { margin-inline-start: calc(calc(var(--v-slider-track-size) + 2px) / 2); transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2)); } .v-locale--is-rtl.v-slider.v-input--vertical .v-slider-track__tick, .v-locale--is-rtl .v-slider.v-input--vertical .v-slider-track__tick { transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2)); } .v-slider.v-input--vertical .v-slider-track__tick--first { bottom: calc(0% + var(--v-slider-tick-size) + 1px); } .v-slider.v-input--vertical .v-slider-track__tick--last { bottom: calc(100% - var(--v-slider-tick-size) - 1px); } .v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label { margin-inline-start: calc(var(--v-slider-track-size) / 2 + 12px); transform: translateY(-50%); } .v-slider-track__ticks--always-show .v-slider-track__tick, .v-slider--focused .v-slider-track__tick { opacity: 1; } .v-slider-track__background--opacity { opacity: 0.38; }