smart-webcomponents-react/source/styles/default/smart.slider.css

[](https://jqwidgets.com/license/)

/* .smart-slider */
smart-slider {
  display: block;
  width: var(--smart-slider-default-width);
  height: var(--smart-slider-default-height);
  --smart-border-top-left-radius: 100%;
  --smart-border-top-right-radius: 100%;
  --smart-border-bottom-left-radius: 100%;
  --smart-border-bottom-right-radius: 100%;
}
smart-slider[orientation=vertical] {
  width: var(--smart-slider-default-height);
  height: var(--smart-slider-default-width);
}
smart-slider.smart-element {
  overflow: visible;
}

.smart-slider .smart-track-container {
  width: 100%;
  height: var(--smart-slider-track-size);
  margin-top: calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size)) / 2 + 2px);
  margin-bottom: calc((var(--smart-slider-thumb-height) - var(--smart-slider-track-size)) / 2 + 2px);
}
.smart-slider .smart-track {
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  float: left;
  /* border-width: var(--smart-border-width);
  border-style: solid;
  border-color: transparent; */
  width: 100%;
  height: var(--smart-slider-track-size);
  background-color: var(--smart-disabled);
  cursor: pointer;
}
.smart-slider .smart-thumb {
  position: absolute;
  margin-left: calc(-1 * var(--smart-slider-thumb-width) / 2);
  margin-top: calc(var(--smart-slider-track-size) / 2 - var(--smart-slider-thumb-height) / 2);
  border-top-left-radius: var(--smart-slider-thumb-border-top-left-radius);
  border-top-right-radius: var(--smart-slider-thumb-border-top-right-radius);
  border-bottom-left-radius: var(--smart-slider-thumb-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-slider-thumb-border-bottom-right-radius);
  border: var(--smart-border-width) solid var(--smart-primary);
  width: var(--smart-slider-thumb-width);
  min-width: var(--smart-slider-track-size);
  height: var(--smart-slider-thumb-height);
  min-height: var(--smart-slider-track-size);
  background-color: var(--smart-primary);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.smart-slider .smart-thumb:before {
  width: 100%;
  height: 100%;
  transition: 0.2s;
  display: block;
  border-radius: 50%;
  content: "";
  z-index: -1;
  opacity: 0.2;
  background: var(--smart-primary);
}
.smart-slider .smart-thumb[hover]:before {
  transform: scale(3);
  animation: slider-thumb-effect 1s infinite;
  animation-delay: 0.1s;
}
.smart-slider .smart-thumb.accessible {
  z-index: 1;
}
.smart-slider .smart-thumb-label {
  display: none;
}
.smart-slider .smart-thumb ~ .smart-thumb {
  display: none;
}
.smart-slider .smart-value {
  position: absolute;
  width: 0;
  height: var(--smart-slider-track-size);
  /* height: calc(var(--smart-slider-track-size) + 1px); */
  /* top: calc(-1 * var(--smart-slider-track-size)); */
  background-color: var(--smart-ui-state-active);
}
.smart-slider .smart-tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--smart-primary);
  width: var(--smart-slider-tooltip-width);
  height: var(--smart-slider-tooltip-height);
  padding: 4px 12px;
  font-family: var(--smart-font-family);
  font-size: 75%;
  opacity: 0.5;
  border-radius: 0px;
  background-color: var(--smart-primary);
  color: var(--smart-primary-color);
  left: calc(-1 * var(--smart-slider-tooltip-width) / 2 + var(--smart-slider-thumb-width) / 2 - 1px);
  top: calc(-1 * var(--smart-slider-tooltip-height) - 22px);
}
.smart-slider .smart-tooltip .smart-tooltip-content {
  background: inherit;
  color: inherit;
  border-color: inherit;
  background-color: inherit;
}
.smart-slider .smart-tooltip.smart-hidden {
  display: none;
}
.smart-slider .smart-tick {
  position: absolute;
  width: 1px;
  height: var(--smart-slider-tick-size);
  background-color: var(--smart-border);
}
.smart-slider .smart-tick-minor {
  height: var(--smart-slider-minor-tick-size);
}
.smart-slider .smart-scale {
  margin-left: var(--smart-border-width);
  height: calc(100% - var(--smart-slider-thumb-height) - 4px);
}
.smart-slider .smart-scale.smart-hidden {
  display: none;
}
.smart-slider .smart-scale-near .smart-tick {
  bottom: 0;
}
.smart-slider .smart-scale-near .smart-label {
  bottom: calc(var(--smart-slider-tick-size) + 2px);
}
.smart-slider .smart-scale-far .smart-tick {
  top: 0;
}
.smart-slider .smart-scale-far .smart-label {
  top: calc(var(--smart-slider-tick-size) + 2px);
}
.smart-slider .smart-spin-button {
  display: block;
  float: left;
  margin-top: calc(var(--smart-slider-track-size) / 2 - var(--smart-slider-spin-button-height) / 2);
  border: var(--smart-border-width) solid var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  width: var(--smart-slider-spin-button-width);
  height: var(--smart-slider-spin-button-height);
  background-color: var(--smart-surface);
  color: var(--smart-surface-color);
  cursor: pointer;
  padding: 0px;
  min-height: 0;
  top: 0px;
  position: relative;
}
.smart-slider .smart-spin-button .smart-button {
  padding: 0px;
  min-height: 0;
}
.smart-slider .smart-spin-button .smart-arrow {
  left: 1px;
  top: 1px;
}
.smart-slider .smart-spin-button.smart-hidden {
  display: none;
}
.smart-slider .smart-spin-button[hover] {
  background-color: var(--smart-ui-state-hover);
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
}
.smart-slider .smart-spin-button[active] {
  background-color: var(--smart-ui-state-active);
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
}
.smart-slider:focus {
  border-color: var(--smart-outline);
}
.smart-slider:focus .smart-thumb:before {
  transform: scale(3);
  animation: slider-thumb-effect 1s infinite;
  animation-delay: 0.1s;
}
.smart-slider:not([animation=none]) .smart-thumb.enable-animation {
  transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none]) .smart-value.enable-animation {
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[range-slider] .smart-value.enable-animation {
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[inverted] .smart-value.enable-animation {
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[orientation=vertical] .smart-thumb.enable-animation {
  transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[orientation=vertical] .smart-value.enable-animation {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[orientation=vertical][inverted] .smart-value.enable-animation {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider:not([animation=none])[orientation=vertical][range-slider] .smart-value.enable-animation {
  transition: height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.smart-slider[disabled] .smart-thumb,
.smart-slider[disabled] .smart-spin-button,
.smart-slider[disabled] .smart-track,
.smart-slider[disabled] .smart-value, .smart-slider[readonly] .smart-thumb,
.smart-slider[readonly] .smart-spin-button,
.smart-slider[readonly] .smart-track,
.smart-slider[readonly] .smart-value {
  cursor: default;
}
.smart-slider:not([hint]) .smart-hint {
  display: none;
}
.smart-slider[hint] .smart-hint {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  font-size: 12px;
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}
.smart-slider[hint] .smart-hint:empty {
  display: none;
}
.smart-slider[hint][scale-position=both]:not([orientation=vertical]) .smart-hint {
  bottom: 150%;
}
.smart-slider[hint]:not([animation=none]) .smart-hint {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}
.smart-slider[value="0"] .smart-thumb {
  background-color: var(--smart-border);
  border-color: var(--smart-border);
}
.smart-slider[value="0"] .smart-thumb:before {
  background: var(--smart-border);
}
.smart-slider[show-buttons] .smart-track-container {
  margin-top: calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size)) / 2 + 2px);
  margin-bottom: calc((var(--smart-slider-spin-button-height) - var(--smart-slider-track-size)) / 2 + 2px);
}
.smart-slider[show-buttons] .smart-track {
  margin-left: calc(var(--smart-slider-thumb-width) / 2);
  margin-right: calc(var(--smart-slider-thumb-width) / 2);
  width: calc(100% - 2 * var(--smart-slider-spin-button-width) - var(--smart-slider-thumb-width));
}
.smart-slider[show-buttons] .smart-scale {
  height: calc(100% - var(--smart-slider-spin-button-height) - 4px);
  margin-left: calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width) / 2 + var(--smart-border-width));
  margin-right: calc(var(--smart-slider-spin-button-width) + var(--smart-slider-thumb-width) / 2);
}
.smart-slider[range-slider] .smart-thumb ~ .smart-thumb {
  display: block;
}
.smart-slider[tooltip-position=far] .smart-tooltip {
  top: calc(var(--smart-slider-thumb-height) + 1px);
}
.smart-slider[scale-position=both] .smart-scale {
  height: calc((100% - var(--smart-slider-thumb-height)) / 2 - 2px);
}
.smart-slider[scale-position=both][show-buttons] .smart-scale {
  height: calc((100% - var(--smart-slider-spin-button-height)) / 2 - 2px);
}
.smart-slider[ticks-visibility=none] .smart-scale-near .smart-label {
  bottom: 2px;
}
.smart-slider[ticks-visibility=none] .smart-scale-far .smart-label {
  top: 2px;
}
.smart-slider[ticks-position=track] .smart-tick {
  height: 100%;
}
.smart-slider[ticks-position=track] .smart-tick-minor {
  height: 60%;
  top: 50%;
  transform: translateY(-50%);
}
.smart-slider[ticks-position=track] .smart-scale-near .smart-label {
  bottom: 2px;
}
.smart-slider[ticks-position=track] .smart-scale-far .smart-label {
  top: 2px;
}
.smart-slider[show-thumb-label] .smart-thumb {
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 9999;
}
.smart-slider[show-thumb-label] .smart-thumb-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
  font-family: var(--smart-font-family);
  user-select: none;
}
.smart-slider[show-thumb-label]:focus .smart-thumb-label {
  display: block;
}
.smart-slider[thumb-label-position=far] .smart-thumb {
  top: 0;
}
.smart-slider[thumb-label-position=far]:focus .smart-thumb {
  top: calc(var(--smart-slider-default-height) + var(--smart-slider-thumb-width) * 2);
}
.smart-slider[orientation=vertical] > .smart-container, .smart-slider[orientation=vertical].smart-container {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
}
.smart-slider[orientation=vertical] .smart-thumb {
  margin-left: calc(var(--smart-slider-track-size) / 2 - var(--smart-slider-thumb-width) / 2);
  margin-top: calc(-1 * var(--smart-slider-thumb-height) / 2);
}
.smart-slider[orientation=vertical] .smart-track-container {
  float: left;
  width: var(--smart-slider-track-size);
  height: 100%;
  margin-top: 0;
  margin-right: calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size)) / 2 + 2px);
  margin-bottom: 0;
  margin-left: calc((var(--smart-slider-thumb-width) - var(--smart-slider-track-size)) / 2 + 2px);
  z-index: 1;
}
.smart-slider[orientation=vertical] .smart-track {
  float: none;
  width: var(--smart-slider-track-size);
  height: 100%;
}
.smart-slider[orientation=vertical] .smart-value {
  width: var(--smart-slider-track-size);
  /* width: calc(var(--smart-slider-track-size) + 1px);
  left: calc(-1 * var(--smart-slider-track-size)); */
  height: 0;
}
.smart-slider[orientation=vertical] .smart-scale {
  float: left;
  margin-top: var(--smart-border-width);
  width: calc(100% - var(--smart-slider-thumb-width) - 2px);
  height: 100%;
}
.smart-slider[orientation=vertical] .smart-tooltip {
  left: calc(-1 * var(--smart-slider-tooltip-width) - 8px);
  top: calc(-1 * var(--smart-slider-tooltip-height) / 2 + var(--smart-slider-thumb-height) / 2 - 1px);
}
.smart-slider[orientation=vertical] .smart-tick {
  width: var(--smart-slider-tick-size);
  height: 1px;
}
.smart-slider[orientation=vertical] .smart-tick-minor {
  width: var(--smart-slider-minor-tick-size);
}
.smart-slider[orientation=vertical] .smart-scale-near .smart-tick {
  right: 0;
}
.smart-slider[orientation=vertical] .smart-scale-near .smart-label {
  right: calc(var(--smart-slider-tick-size) + 2px);
  bottom: initial;
}
.smart-slider[orientation=vertical] .smart-scale-far .smart-label {
  left: calc(var(--smart-slider-tick-size) + 2px);
}
.smart-slider[orientation=vertical] .smart-spin-button {
  float: none;
  margin-left: calc(var(--smart-slider-track-size) / 2 - var(--smart-slider-spin-button-width) / 2);
  margin-top: 0;
}
.smart-slider[orientation=vertical][inverted] .smart-thumb {
  margin-top: 0;
}
.smart-slider[orientation=vertical][scale-position=both] .smart-scale {
  width: calc((100% - var(--smart-slider-thumb-width)) / 2 - 2px);
}
.smart-slider[orientation=vertical][scale-position=both][show-buttons] .smart-scale {
  width: calc((100% - var(--smart-slider-spin-button-width)) / 2);
}
.smart-slider[orientation=vertical][show-buttons] .smart-track-container {
  margin-right: calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size)) / 2 + 2px);
  margin-left: calc((var(--smart-slider-spin-button-width) - var(--smart-slider-track-size)) / 2 + 2px);
}
.smart-slider[orientation=vertical][show-buttons] .smart-track {
  margin-left: 0;
  margin-right: 0;
  margin-top: calc(var(--smart-slider-thumb-height) / 2);
  margin-bottom: calc(var(--smart-slider-thumb-height) / 2);
  width: 100%;
  height: calc(100% - 2 * var(--smart-slider-spin-button-height) - var(--smart-slider-thumb-height));
}
.smart-slider[orientation=vertical][show-buttons] .smart-scale {
  margin-top: calc(var(--smart-slider-spin-button-height) + var(--smart-slider-thumb-height) / 2 + var(--smart-border-width));
  margin-right: 0;
  margin-left: 0;
  height: calc(100% - var(--smart-slider-spin-button-height) * 2 - var(--smart-slider-thumb-height));
}
.smart-slider[orientation=vertical][tooltip-position=far] .smart-tooltip {
  left: calc(var(--smart-slider-thumb-width) + 1px);
}
.smart-slider[orientation=vertical][ticks-position=track] .smart-tick {
  width: 100%;
  height: 1px;
}
.smart-slider[orientation=vertical][ticks-position=track] .smart-tick-minor {
  width: 60%;
  left: 50%;
  transform: translateX(-50%);
}
.smart-slider[orientation=vertical][ticks-position=track] .smart-scale-near .smart-label {
  right: 2px;
}
.smart-slider[orientation=vertical][ticks-position=track] .smart-scale-far .smart-label {
  left: 2px;
}
.smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-near .smart-label {
  right: 2px;
}
.smart-slider[orientation=vertical][ticks-visibility=none] .smart-scale-far .smart-label {
  left: 2px;
}
.smart-slider[orientation=vertical][thumb-label-position=far] .smart-thumb {
  left: 100%;
  top: calc(100% + var(--smart-slider-thumb-height) / 2);
}

@keyframes slider-thumb-effect {
  0%, 100% {
    transform: scale(3);
  }
  50% {
    transform: scale(2.75);
  }
}
/* .smart-slider */
smart-slider[right-to-left] .smart-tooltip-content {
  direction: rtl;
}

.smart-slider[right-to-left] .smart-label {
  direction: rtl;
}
.smart-slider[right-to-left] .smart-hint {
  direction: rtl;
}
.smart-slider[right-to-left]:not([animation=none]) .smart-value.enable-animation {
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}