nitropage/src/components/form/slider.module.css

A free and open source, extensible visual page builder based on SolidStart.

.slider {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  user-select: none;
  touch-action: none;
  height: 1rem;
}
.slider__value {
  color: var(--np-slate-700);
  font-size: 0.875rem;
  font-feature-settings: "tnum";
  width: 41px;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.slider__track {
  background-color: var(--np-gray-300);
  position: relative;
  border-radius: 9999px;
  height: 50%;
  width: 100%;
  margin: 0 0.5rem;
}
.slider__fill {
  position: absolute;
  background-color: var(--np-gray-500);
  border-radius: 9999px;
  height: 100%;
}
.slider__thumb {
  display: block;
  height: 200%;
  aspect-ratio: 1 / 1;
  background-color: var(--np-gray-500);
  border-radius: 9999px;
  top: -50%;
}
.slider__thumb:focus {
  outline: none;
}
.slider__thumb:hover,
.slider__thumb:focus {
  background-color: var(--np-slate-600);
  box-shadow:
    0 0 0 1px white,
    0 0 0 3px var(--np-accent-400);
}