.multi-slider {
  --thumb-size: 12px;
}

input[type='range'],
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgb(17 24 39 / 10%);
  border: 1px solid #bfdbfe;
  cursor: pointer;
  height: var(--thumb-size);
  width: var(--thumb-size);
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

/* Firefox */
input[type='range']::-moz-range-thumb {
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 1px 3px rgb(17 24 39 / 10%);
  border: 1px solid #bfdbfe;
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

.multi-slider .small {
  --thumb-size: 12px;
}
.multi-slider .medium {
  --thumb-size: 16px;
}
.multi-slider .large {
  --thumb-size: 20px;
}
