Color Picker with Slider

by Travis Almand

HTML

<div id="color_picker">
  <div class="colors"></div>
  <input type="range" min="0" max="9" value="0" />
  <div class="chosen-color"></div>
</div>

SCSS

#color_picker {
  border: 1px solid gainsboro;
  overflow: hidden;
  position: relative;
  
  .colors {
    display: flex;
    width: 100%;
    
    span {
      cursor: pointer;
      flex-grow: 1;
      height: 30px;
    }
  }
  
  input {
    background: none;
    display: block;
    height: 30px;
    left: 0;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 92.5%;
    z-index: 2;
  }
  
  .chosen-color {
    border: 3px solid rebeccapurple;
    height: 30px;
    transition: all 0.5s;
  }
}

JavaScript

var $colorPickerInput = document.querySelector('#color_picker input');
var $colorsRange = document.querySelector('#color_picker .colors');
var $chosenColor = document.querySelector('#color_picker .chosen-color');
var colors = ['#FFFFFF', '#E1E1E1', '#C5C5C5', '#AAAAAA', '#8F8F8F', '#737373', '#585858', '#3D3D3D', '#222222', '#000000'];
var htmlString = '';

colors.forEach(function (color, index) {
	htmlString += '<span style="background-color: ' + color + '" data-index="' + index + '"></span>';
});
$colorsRange.innerHTML = htmlString;

$colorPickerInput.addEventListener('change', function () {
	$chosenColor.style.backgroundColor = colors[this.value];
});

$colorsRange.addEventListener('click', function (e) {
	console.log(e.target);
  $colorPickerInput.value = e.target.dataset.index;
  $chosenColor.style.backgroundColor = e.target.style.backgroundColor;
});