@varialkit/slider 0.1.0

package/src/Slider.scss

@@ -0,0 +1,417 @@
+.solara-slider {
+  --slider-track-bg: var(--color-surface-300);
+  --slider-track-fill: var(--color-accent-primary);
+  --slider-thumb-bg: var(--color-surface-0);
+  --slider-thumb-border: var(--color-divider-primary);
+  --slider-thumb-hover: var(--color-surface-100);
+  --slider-thumb-active: var(--color-surface-0);
+  --slider-thumb-focus-border: var(--color-primary);
+  --slider-thumb-focus-halo: var(--color-primary-focus);
+  --slider-tooltip-bg: var(--color-text-primary);
+  --slider-tooltip-text: var(--color-text-inverse);
+  --slider-track-height: 6px;
+  --slider-track-radius: 9999px;
+  --slider-fill-end-radius: var(--slider-track-radius);
+  --slider-thumb-size: 20px;
+  // Thumb geometry defaults (knob variant uses these directly).
+  --slider-thumb-width: var(--slider-thumb-size);
+  --slider-thumb-height: var(--slider-thumb-size);
+  --slider-thumb-radius: 50%;
+  --slider-thumb-opacity: 1;
+  // Track padding keeps thumbs from clipping at the ends.
+  --slider-track-padding-offset: 0px;
+  --slider-track-padding: calc(var(--slider-thumb-width) / 2 + var(--slider-track-padding-offset));
+
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  font-family: var(--font-body);
+}
+
+.solara-slider__container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+}
+
+.solara-slider__track-wrapper {
+  position: relative;
+  width: 100%;
+  height: var(--slider-thumb-size);
+  padding: 0 var(--slider-track-padding);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: calc(var(--space-1) * -1);
+    bottom: calc(var(--space-1) * -1);
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+}
+
+.solara-slider__track {
+  position: relative;
+  width: 100%;
+  height: var(--slider-track-height);
+  overflow: hidden;
+  border-radius: var(--slider-track-radius);
+  background-color: var(--slider-track-bg);
+  transition: background-color 0.2s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: var(--slider-range-start, 0%);
+    top: 0;
+    height: 100%;
+    width: calc(var(--slider-range-end, 0%) - var(--slider-range-start, 0%));
+    background-color: var(--slider-track-fill);
+    pointer-events: none;
+    border-radius: var(--slider-track-radius) var(--slider-fill-end-radius) var(--slider-fill-end-radius)
+      var(--slider-track-radius);
+    transition: width 0.15s ease-out, left 0.15s ease-out;
+  }
+}
+
+.solara-slider__range {
+  position: absolute;
+  pointer-events: none;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+}
+
+.solara-slider__input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  margin: 0;
+  cursor: pointer;
+  z-index: 3;
+
+  &:focus-visible~.solara-slider__thumb {
+    border-color: var(--slider-thumb-focus-border);
+    box-shadow: 0 0 0 2px var(--slider-thumb-focus-halo);
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.solara-slider__input--range {
+  pointer-events: none;
+}
+
+.solara-slider--vertical .solara-slider__input {
+  pointer-events: none;
+}
+
+.solara-slider__thumb {
+  position: absolute;
+  top: 50%;
+  left: var(--slider-progress, 0%);
+  width: var(--slider-thumb-width);
+  height: var(--slider-thumb-height);
+  background-color: var(--slider-thumb-bg);
+  border-radius: var(--slider-thumb-radius);
+  border: 1px solid var(--slider-thumb-border);
+  box-shadow: var(--elevation-1);
+  opacity: var(--slider-thumb-opacity);
+  z-index: 2;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  transition:
+    left 0.15s ease-out,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.solara-slider__thumb--lower {
+  z-index: 2;
+}
+
+.solara-slider__thumb--upper {
+  z-index: 3;
+}
+
+.solara-slider__tooltip-trigger {
+  position: absolute;
+  top: 50%;
+  left: var(--slider-progress, 0%);
+  display: block;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+}
+
+.solara-slider__tooltip-anchor {
+  display: block;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.solara-slider--vertical .solara-slider__tooltip-trigger {
+  top: auto;
+  left: 50%;
+  bottom: var(--slider-progress, 0%);
+  transform: translate(-50%, 50%);
+}
+
+.solara-slider:hover:not(.solara-slider--disabled) .solara-slider__thumb {
+  background-color: var(--slider-thumb-hover);
+  border-color: var(--color-divider-accent);
+  box-shadow: var(--elevation-2);
+}
+
+.solara-slider--dragging .solara-slider__thumb {
+  background-color: var(--slider-thumb-active);
+  border-color: var(--color-divider-accent);
+  box-shadow: var(--elevation-3);
+  transition: background-color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
+}
+
+.solara-slider__tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-6px);
+  background-color: var(--slider-tooltip-bg);
+  color: var(--slider-tooltip-text);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: var(--font-size-caption-scaled);
+  line-height: var(--line-height-caption-scaled);
+  white-space: nowrap;
+  box-shadow: var(--elevation-1);
+  pointer-events: none;
+  z-index: 10;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 4px;
+    border-style: solid;
+    border-color: var(--slider-tooltip-bg) transparent transparent transparent;
+  }
+}
+
+.solara-slider--vertical {
+  height: 100%;
+  width: var(--slider-thumb-size);
+}
+
+.solara-slider--vertical .solara-slider__container {
+  height: 100%;
+  width: var(--slider-thumb-size);
+}
+
+.solara-slider--vertical .solara-slider__track-wrapper {
+  width: var(--slider-thumb-size);
+  height: 100%;
+  padding: var(--slider-track-padding) 0;
+  justify-content: center;
+}
+
+.solara-slider--vertical .solara-slider__track {
+  width: var(--slider-track-height);
+  height: 100%;
+}
+
+.solara-slider--vertical .solara-slider__track::before {
+  left: 0;
+  top: auto;
+  bottom: var(--slider-range-start, 0%);
+  width: 100%;
+  height: calc(var(--slider-range-end, 0%) - var(--slider-range-start, 0%));
+  border-radius: var(--slider-track-radius) var(--slider-track-radius) var(--slider-fill-end-radius)
+    var(--slider-fill-end-radius);
+  transition: height 0.15s ease-out, bottom 0.15s ease-out;
+}
+
+.solara-slider--vertical .solara-slider__thumb {
+  top: auto;
+  left: 50%;
+  bottom: var(--slider-progress, 0%);
+  transform: translate(-50%, 50%);
+  transition:
+    bottom 0.15s ease-out,
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.solara-slider--vertical .solara-slider__tooltip {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(8px);
+
+  &::after {
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%) translateX(-100%);
+    border-color: transparent var(--slider-tooltip-bg) transparent transparent;
+  }
+}
+
+.solara-slider--size-small {
+  --slider-track-height: 4px;
+  --slider-thumb-size: 16px;
+}
+
+.solara-slider--size-medium {
+  --slider-track-height: 6px;
+  --slider-thumb-size: 20px;
+}
+
+.solara-slider--size-large {
+  --slider-track-height: 8px;
+  --slider-thumb-size: 24px;
+}
+
+.solara-slider--size-xlarge {
+  --slider-track-height: 12px;
+  --slider-thumb-size: 30px;
+}
+
+.solara-slider--type-knob {
+  --slider-thumb-width: var(--slider-thumb-size);
+  --slider-thumb-height: var(--slider-thumb-size);
+  --slider-thumb-radius: 50%;
+  --slider-track-padding-offset: 1px;
+}
+
+.solara-slider--type-thumb {
+  --slider-thumb-size: var(--slider-track-height);
+  --slider-thumb-width: 5px;
+  --slider-thumb-height: calc(var(--slider-track-height) - var(--slider-thumb-gap));
+  --slider-thumb-radius: 9999px;
+  --slider-fill-end-radius: 6px;
+  --slider-thumb-border: transparent;
+  --slider-thumb-opacity: 0.65;
+  // Extra horizontal padding so the thumb doesn't clip at track edges.
+  --slider-track-padding-offset: 4px;
+  // Pull the thumb slightly inside the filled bar end.
+  --slider-thumb-inset: 5px;
+  // Vertical breathing room between thumb and track edges.
+  --slider-thumb-gap: 3px;
+}
+
+.solara-slider--type-thumb .solara-slider__thumb {
+  // Align the thumb to the track's usable width (track minus padding),
+  // then pull it inward so its right edge sits inside the fill.
+  left: calc(
+    var(--slider-track-padding) +
+      (100% - (var(--slider-track-padding) * 2)) * var(--slider-progress-decimal, 0) -
+      var(--slider-thumb-inset)
+  );
+  // Thumb height already accounts for gap; keep transform for alignment only.
+  transform: translate(-100%, -50%);
+}
+
+.solara-slider--type-thumb .solara-slider__tooltip-trigger {
+  left: calc(
+    var(--slider-track-padding) +
+      (100% - (var(--slider-track-padding) * 2)) * var(--slider-progress-decimal, 0) -
+      var(--slider-thumb-inset)
+  );
+  transform: translate(-100%, -50%);
+}
+
+.solara-slider--type-thumb.solara-slider--vertical .solara-slider__thumb {
+  left: 50%;
+  // Same idea as horizontal: clamp to usable track height and inset slightly.
+  bottom: calc(
+    var(--slider-track-padding) +
+      (100% - (var(--slider-track-padding) * 2)) * var(--slider-progress-decimal, 0) -
+      var(--slider-thumb-inset)
+  );
+  transform: translate(-50%, 0);
+}
+
+.solara-slider--type-thumb.solara-slider--vertical .solara-slider__tooltip-trigger {
+  left: 50%;
+  bottom: calc(
+    var(--slider-track-padding) +
+      (100% - (var(--slider-track-padding) * 2)) * var(--slider-progress-decimal, 0) -
+      var(--slider-thumb-inset)
+  );
+  transform: translate(-50%, 0);
+}
+
+.solara-slider--type-thumb.solara-slider--size-small {
+  // Smaller track but keep the thumb slim and consistent.
+  --slider-track-height: 12px;
+  --slider-thumb-width: 5px;
+  --slider-thumb-gap: 3px;
+  --slider-fill-end-radius: 5px;
+  --slider-track-padding-offset: 3px;
+}
+
+.solara-slider--type-thumb.solara-slider--size-medium {
+  // Taller track for readability with the same slim thumb width.
+  --slider-track-height: 16px;
+  --slider-thumb-width: 5px;
+  --slider-thumb-gap: 4px;
+  --slider-fill-end-radius: 6px;
+  --slider-track-padding-offset: 6px;
+}
+
+.solara-slider--type-thumb.solara-slider--size-large {
+  // Larger track; increase padding so the thumb remains inset.
+  --slider-track-height: 19px;
+  --slider-thumb-width: 5px;
+  --slider-thumb-gap: 6px;
+  --slider-fill-end-radius: 8px;
+  --slider-track-padding-offset: 9px;
+  --slider-thumb-inset: 6px;
+}
+
+.solara-slider--type-thumb.solara-slider--size-xlarge {
+  // Extra-large track with more breathing room.
+  --slider-track-height: 24px;
+  --slider-thumb-width: 5px;
+  --slider-track-padding-offset: 10px;
+  --slider-thumb-inset: 7px;
+  --slider-thumb-gap: 8px;
+  --slider-fill-end-radius: 10px;
+}
+
+.solara-slider--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.solara-slider--disabled .solara-slider__track-wrapper,
+.solara-slider--disabled .solara-slider__input {
+  cursor: not-allowed;
+}
+
+.solara-slider--dragging .solara-slider__track::before {
+  transition: none;
+}