JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel="stylesheet" href="http://griffusion.elementfx.com/css/colours.css">
Drag slider to change shade.
<link rel="stylesheet" type="text/css" href="http://griffusion.elementfx.com/css/colours.css">


<p>
  <select class='select_colour'><option value='11'>Pink</option><option value='12'>Redpurple</option><option value='21'>Red</option><option value='22'>Brown</option></select> 
  <input type="range" min="1" max="13" value="7" class="select_shade"> 
  
  <span class='colour'></span>
</p>

<img src='https://cdn.pixabay.com/photo/2016/10/29/23/54/animal-1782020_960_720.png' id='pic'>

CSS

@import url("http://griffusion.elementfx.com/css/colours.css"); 

img {width:40%;}

JavaScript

$('.select_colour,.select_shade').change(function(){
  var colour = $('.select_colour').val();
  var shade = $('.select_shade').val();
  if(shade < 10){shade = '0'+shade;}
  $('.colour').html(colour+''+shade);
  
  var colourclass = 'filter'+colour+''+shade;
  $('#pic').attr("class",colourclass);
});