vuestic-ui/dist/esm-node/VaSlider.css

Vue 3 UI Framework

:root,
:host {
  /* Track */
  --va-slider-track-border-radius: 0.25rem;
  --va-slider-track-transition: 0.5s ease-out;
  --va-slider-track-opacity: 1;
  /* Pin */
  --va-slider-pin-transition: background-color 0.3s ease-out 0.1s;
  /* Handler */
  --va-slider-handler-width: 1.25rem;
  --va-slider-handler-height: 1.25rem;
  --va-slider-handler-background: var(--va-background-primary);
  --va-slider-handler-border: 0.375rem solid;
  --va-slider-handler-border-radius: 50%;
  --va-slider-handler-outline: none !important;
  --va-slider-handler-left: -0.375rem;
  --va-slider-handler-transition: 0s;
  /* Dot */
  --va-slider-dot-transform: translate(-0.625rem, -0.625rem);
  --va-slider-dot-display: block;
  --va-slider-dot-width: 1.75rem;
  --va-slider-dot-height: 1.75rem;
  --va-slider-dot-border-radius: 50%;
  --va-slider-dot-opacity: 0.2;
  --va-slider-dot-pointer-events: none;
  /* Dot Value */
  --va-slider-dot-value-transform: translate(-50%, -100%);
  --va-slider-dot-value-user-select: none;
  --va-slider-dot-value-font-size: 0.625rem;
  --va-slider-dot-value-letter-spacing: 0.6px;
  --va-slider-dot-value-line-height: 1.2;
  --va-slider-dot-value-font-weight: 700;
  --va-slider-dot-value-text-transform: none;
  --va-slider-dot-value-white-space: nowrap;
  /* Input Label */
  --va-slider-input-label-user-select: none;
  --va-slider-input-label-font-size: 0.625rem;
  --va-slider-input-label-letter-spacing: 0.6px;
  --va-slider-input-label-line-height: 1.2;
  --va-slider-input-label-font-weight: 700;
  --va-slider-input-label-text-transform: uppercase;
  --va-slider-input-label-inverse-user-select: none;
  --va-slider-input-label-inverse-font-size: 0.625rem;
  --va-slider-input-label-inverse-letter-spacing: 0.6px;
  --va-slider-input-label-inverse-line-height: 1.2;
  --va-slider-input-label-inverse-font-weight: 700;
  --va-slider-input-label-inverse-text-transform: uppercase;
  /* Horizontal */
  --va-slider-horizontal-input-wrapper-margin-right: 1rem;
  /* Horizontal Track */
  --va-slider-horizontal-track-height: 0.5rem;
  --va-slider-horizontal-track-width: 100%;
  /* Horizontal Track */
  --va-slider-horizontal-handler-transform: translateX(-50%);
  /* Horizontal Dot */
  --va-slider-horizontal-dot-value-top: -8px;
  --va-slider-horizontal-dot-value-left: 50%;
  /* Vertical */
  --va-slider-vertical-height: 100%;
  --va-slider-vertical-padding: 12px 0 12px 0;
  --va-slider-vertical-flex-direction: column;
  --va-slider-vertical-align-items: center;
  /* Vertical Label */
  --va-slider-vertical-label-margin-bottom: 0.625rem;
  --va-slider-vertical-label-inverse-left: -0.375rem;
  --va-slider-vertical-label-inverse-margin-top: 0.625rem;
  /* Vertical Input Wrapper */
  --va-slider-vertical-input-wrapper-max-width: 1rem;
  --va-slider-vertical-input-wrapper-min-width: 2.5rem;
  /* Vertical Track */
  --va-slider-vertical-track-height: 100%;
  --va-slider-vertical-track-width: 0.5rem;
  --va-slider-vertical-track-bottom: 0;
  /* Vertical Handler */
  --va-slider-vertical-handler-transform: translateY(50%);
  /* Vertical Dot Value */
  --va-slider-vertical-dot-value-top: 0.625rem;
  --va-slider-vertical-dot-value-left: 1.25rem;
}
.va-slider {
  display: flex;
  align-items: center;
  font-family: var(--va-font-family);
}
.va-slider__input-wrapper {
  position: relative;
  display: flex;
}
.va-slider__container {
  position: relative;
  display: flex;
  align-items: center;
  cursor: grab;
}
.va-slider__track {
  position: absolute;
  border-radius: var(--va-slider-track-border-radius);
  transition: var(--va-slider-track-transition);
  opacity: var(--va-slider-track-opacity);
}
.va-slider__track--active {
  transition: 0s;
}
.va-slider__track--selected {
  opacity: 1;
}
.va-slider__handler {
  position: absolute;
  width: var(--va-slider-handler-width);
  height: var(--va-slider-handler-height);
  background: var(--va-slider-handler-background);
  border: var(--va-slider-handler-border);
  border-radius: var(--va-slider-handler-border-radius);
  outline: var(--va-slider-handler-outline);
  left: var(--va-slider-handler-left);
  transition: var(--va-slider-handler-transition);
  box-sizing: border-box;
}
.va-slider__handler__dot--focus {
  transform: var(--va-slider-dot-transform);
  display: block;
  width: var(--va-slider-dot-width);
  height: var(--va-slider-dot-height);
  position: absolute;
  border-radius: var(--va-slider-dot-border-radius);
  opacity: var(--va-slider-dot-opacity);
  pointer-events: var(--va-slider-dot-pointer-events);
}
.va-slider__handler__dot--value {
  transform: var(--va-slider-dot-value-transform);
  -webkit-user-select: var(--va-slider-dot-value-user-select);
     -moz-user-select: var(--va-slider-dot-value-user-select);
          user-select: var(--va-slider-dot-value-user-select);
  font-size: var(--va-slider-dot-value-font-size);
  letter-spacing: var(--va-slider-dot-value-letter-spacing);
  line-height: var(--va-slider-dot-value-line-height);
  font-weight: var(--va-slider-dot-value-font-weight);
  text-transform: var(--va-slider-dot-value-text-transform);
  white-space: var(--va-slider-dot-value-white-space);
}
.va-slider .va-input__label {
  -webkit-user-select: var(--va-slider-input-label-user-select);
     -moz-user-select: var(--va-slider-input-label-user-select);
          user-select: var(--va-slider-input-label-user-select);
  font-size: var(--va-slider-input-label-font-size);
  letter-spacing: var(--va-slider-input-label-letter-spacing);
  line-height: var(--va-slider-input-label-line-height);
  font-weight: var(--va-slider-input-label-font-weight);
  text-transform: var(--va-slider-input-label-text-transform);
}
.va-slider .va-input__label--inverse {
  -webkit-user-select: var(--va-slider-input-label-inverse-user-select);
     -moz-user-select: var(--va-slider-input-label-inverse-user-select);
          user-select: var(--va-slider-input-label-inverse-user-select);
  font-size: var(--va-slider-input-label-inverse-font-size);
  letter-spacing: var(--va-slider-input-label-inverse-letter-spacing);
  line-height: var(--va-slider-input-label-inverse-line-height);
  font-weight: var(--va-slider-input-label-inverse-font-weight);
  text-transform: var(--va-slider-input-label-inverse-text-transform);
}
.va-slider--grabbing .va-slider__container {
  cursor: grabbing;
}
.va-slider--disabled {
  cursor: default;
  opacity: 0.4;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-slider--disabled .va-slider__container {
  cursor: default;
}
.va-slider--readonly .va-slider__container {
  cursor: default;
}
.va-slider--horizontal .va-slider__input-wrapper {
  flex-basis: fit-content;
  flex-grow: 0;
  margin-right: var(--va-slider-horizontal-input-wrapper-margin-right);
}
.va-slider--horizontal .va-slider__input-wrapper:last-of-type {
  margin-left: 1rem;
}
.va-slider--horizontal .va-slider__container {
  width: 100%;
  height: 1.5rem;
}
.va-slider--horizontal .va-slider__track {
  height: var(--va-slider-horizontal-track-height);
  width: var(--va-slider-horizontal-track-width);
}
.va-slider--horizontal .va-slider__mark {
  position: absolute;
  width: 0.125rem;
  height: 0.75rem;
}
.va-slider--horizontal .va-slider__handler {
  transform: var(--va-slider-horizontal-handler-transform);
}
.va-slider--horizontal .va-slider__handler--inactive {
  transition: left 0.5s ease-out;
}
.va-slider--horizontal .va-slider__handler__dot--value {
  position: absolute;
  top: var(--va-slider-horizontal-dot-value-top);
  left: var(--va-slider-horizontal-dot-value-left);
}
.va-slider--horizontal .va-input__label {
  margin-right: 1rem;
}
.va-slider--horizontal .va-input__label--inverse {
  margin-left: 1rem;
}
.va-slider--vertical {
  height: var(--va-slider-vertical-height);
  padding: var(--va-slider-vertical-padding);
  flex-direction: var(--va-slider-vertical-flex-direction);
  align-items: var(--va-slider-vertical-align-items);
}
.va-slider--vertical .va-input__label {
  margin-bottom: var(--va-slider-vertical-label-margin-bottom);
}
.va-slider--vertical .va-input__label--inverse {
  left: var(--va-slider-vertical-label-inverse-left);
  margin-top: var(--va-slider-vertical-label-inverse-margin-top);
}
.va-slider--vertical .va-slider__input-wrapper {
  flex-basis: fit-content;
  flex-grow: 0;
  max-width: var(--va-slider-vertical-input-wrapper-max-width);
  min-width: var(--va-slider-vertical-input-wrapper-min-width);
  position: relative;
  display: flex;
}
.va-slider--vertical .va-slider__input-wrapper:last-of-type {
  margin-top: 1rem;
}
.va-slider--vertical .va-slider__container {
  height: 100%;
  width: 0.5rem;
}
.va-slider--vertical .va-slider__track {
  height: var(--va-slider-vertical-track-height);
  width: var(--va-slider-vertical-track-width);
  bottom: var(--va-slider-vertical-track-bottom);
}
.va-slider--vertical .va-slider__mark {
  position: absolute;
  width: 0.75rem;
  height: 0.125rem;
  left: -2px;
}
.va-slider--vertical .va-slider__handler {
  transform: var(--va-slider-vertical-handler-transform);
}
.va-slider--vertical .va-slider__handler--inactive {
  transition: bottom 0.5s ease-out;
}
.va-slider--vertical .va-slider__handler__dot--value {
  position: relative;
  top: var(--va-slider-vertical-dot-value-top);
  left: var(--va-slider-vertical-dot-value-left);
}