Color Slider

Use range sliders to change color.

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<div class="container py-5">
  <div class='bg-white border shadow rounded p-3'>
    <p class="lead">Color Slider</p>
    <p>Move the range sliders to change the background color.</p>
    <div class='row'>
      <div class=col-sm-4>
        <label for="redRange">Red</label>
        <input type="range" min="0" max="15" value="0" class="slider" id="redRange">
      </div>
      <div class=col-sm-4>
        <label for="greenRange">Green</label>
        <input type="range" min="0" max="15" value="0" class="slider" id="greenRange">
      </div>
      <div class=col-sm-4>
        <label for="blueRange">Blue</label>
        <input type="range" min="0" max="15" value="0" class="slider" id="blueRange">
      </div>
    </div>
    <p id="hexColor">Hex Color: <span class='text-uppercase'></span></p>
  </div>
</div>

CSS

a {
  font-size: 1.5rem;
}

a:hover {
  text-decoration: none;
}

label {
  display: block;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #ccc;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider:hover {
  opacity: 1;
  /* Fully shown on mouse-over */
}

#redRange::-webkit-slider-thumb {
  background: red;
}

#blueRange::-webkit-slider-thumb {
  background: blue;
}

JavaScript

$('.slider').on('change', function() {
     arrRGB = $('.col-sm-4').map(function(idx, ele) {
       var sliderValue = $(ele).find('.slider').val();
       if (sliderValue == 10) {
         return 'a';
       }
       if (sliderValue == 11) {
         return 'b';
       }
       if (sliderValue == 12) {
         return 'c';
       }
       if (sliderValue == 13) {
         return 'd';
       }
       if (sliderValue == 14) {
         return 'e';
       }
       if (sliderValue == 15) {
         return 'f';
       } else {
         return sliderValue;
       }
     }).get();

     var RGB = '#' + arrRGB[0] + arrRGB[1] + arrRGB[2];

     $('#hexColor span').text(RGB);

     $('body').css('background-color', RGB);
   });