:root {
  --slider-bar-foreground: #e9bbac;
  --slider-bar-background: #dadada;
  --slider-bar-height: 10px;
  --slider-bar-cursor-height: 20px;
  --slider-bar-cursor-border: 4px;
}

.slider-bar {
  display: block;
  width: 100%;
  height: var(--slider-bar-height);
  border-radius: 4px;
  background-color: var(--slider-bar-background);
  position: relative;
  padding: 0 calc( var(--slider-bar-cursor-height) / 2 );
}
  .slider-bar-fill {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: var(--slider-bar-height);
    border-radius: 4px;
    background-color: var(--slider-bar-foreground);
  }

.slider-bar-cursor {
  width: var(--slider-bar-cursor-height);
  height: var(--slider-bar-cursor-height);
  background-color: white;
  border: var(--slider-bar-cursor-border) solid var(--slider-bar-foreground);
  border-radius: 50%;
  position: relative;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 2px 2px 5px -2px rgba(0,0,0,0.5);
  z-index: 1;
}