Color Range Input

color-range-input.markdown

Color Range Input

A Pen by Scott Meyers on CodePen.

License.

index.html

<div class="range-slider">
  <div class="gradient"></div>
  <input class="min" type="range" min="0" max="4" step="1" value="1">
  <input class="max" type="range" min="0" max="4" step="1" value="3">
</div>

script.js

const colors = ['#000000', '#412d74', '#4e248e', '#fb9dbf', '#e9d8fa'];
const getPercentage = (n, t) => (n / t) * 100;
const stringifiedColors = colors.reduce((accumulator, currentValue) => `${accumulator}, ${currentValue}`);

const gradientEl = document.querySelector('.gradient');
gradientEl.style.background = `linear-gradient(to right, ${stringifiedColors})`;

const rangeInputs = document.querySelectorAll('input[type="range"]');
const maxRangeInput = document.querySelector('.max');
const minRangeInput = document.querySelector('.min');

const setup = (event) => {
  const input = event.target;
  if (input.classList.contains('min')) {
    if (input.value > maxRangeInput.value) {
      input.value = maxRangeInput.value;
    } 
  } else {
    if (input.value < minRangeInput.value) {
      input.value = minRangeInput.value;
    } 
  }
  adjustRangeInputStyles(input);
};

const adjustRangeInputStyles = (input) => {
  const percentage = getPercentage(input.value, input.max);
  const maxValue = maxRangeInput.value;
  const minValue = minRangeInput.value;
  
  if (input.classList.contains('min')) {
    input.style.background = 'linear-gradient(to right, rgba(0,0,0,0.6) ' + percentage + '%, transparent ' + percentage + '%, transparent 100%)';
  } else {
    input.style.background = 'linear-gradient(to right, transparent ' + percentage + '%, rgba(0,0,0,0.6) ' + percentage + '%, rgba(0,0,0,0.6) 100%)';
  }
};

rangeInputs.forEach((input) => {
  input.addEventListener('input', setup);
  adjustRangeInputStyles(input);
});

style.scss

body {
  background: darkgrey;
}

.range-slider {
  height: 16px;
  margin: 50px auto;
  position: relative;
  text-align: center;
  width: 184px;
}

.gradient {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}

input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  border-radius: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  
  &:focus {
    outline: none;
  }
}

input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  border-radius: 1px;
  box-shadow: none;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #f0f2f5;
  border-radius: 4px;
  bottom: 4px;
  box-shadow: 0px 2px 6px rgba(60, 64, 67, 0.15),
    0px 1px 2px rgba(60, 64, 67, 0.3), 0px 4px 8px rgba(128, 134, 139, 0.06),
    0px -2px 8px rgba(128, 134, 139, 0.09);
  cursor: pointer;
  height: 24px;
  pointer-events: all;
  position: relative;
  width: 4px;
  z-index: 2;
}