@appearhere/bloom/components/Form/InputRange/InputRange.css

Appear Here's pattern library and styleguide

:root {
  --inputRange-track-height: 0.3rem;
}

.root {
  position: relative;
  composes: fontSmallI from '../../../globals/typography.css';
}

.input {
  width: 100%;
  height: calc(2 * var(--size-lg-ii));
  transform: translateY(calc(var(--size-lg-ii) - var(--inputRange-track-height)));
  position: relative;
}

.slider {
  appearance: none;
  border-radius: 100%;
  height: var(--size-lg-i);
  width: var(--size-lg-i);
  display: block;
  background-color: var(--color-white);
  border: 1px solid var(--color-greyLighter);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  left: calc(-0.5 * var(--size-lg-i));
  top: calc((var(--size-lg-i) - var(--inputRange-track-height)) * -0.5);
  position: absolute;
}

.sliderActive {
  transform: scale(1.1);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.slider:focus {
  transform: scale(1.1);
}

.trackContainer,
.trackActive {
  cursor: pointer;
  display: block;
  height: var(--inputRange-track-height);
  position: absolute;
  width: 100%;
  left: 0;
}

.trackContainer {
  background: var(--color-greyLighter);
}

.trackActive {
  background-color: var(--color-black);
}

.labelValue {
  composes: root from '../../ScreenReadable/ScreenReadable.css';
}

.container {
  position: relative;
}

.histogram {
  height: var(--size-lg-ii);
  width: 100%;
}

.histogram * {
  box-sizing: border-box;
}

.barContainer {
  display: inline-block;
  vertical-align: bottom;
  transform: translateY(1px);
}

.bar {
  width: 100%;
  height: 100%;
  background-color: var(--color-greyLight);
}

.input {
  position: absolute;
  width: 100%;
  bottom: calc((-1 * var(--size-lg-ii) + calc(-1 * var(--inputRange-track-height))))
}