JSFiddle - React, Tailwind, and code Playground

by Julia Will

HTML

<div id="gradient-picker">
 <div class="field">
        <label for="picker-controls-direction">
            Direction
        </label>
        <div class="control">
            <select class="widget-option select admin__control-select" id="picker-controls-direction">
                <option value="to bottom">Top to bottom</option>
            </select>
        </div>
    </div>
    <div class="field">
        <label for="picker-controls-start">
            Start gradient at
        </label>
        <div class="range-control control">
            <input type="range" id="picker-controls-start" min="0" max="100" step="1" />
            <span class="current-value"></span>
        </div>
    </div>
    <div class="field">
        <label for="picker-controls-c1">
            Start Color
        </label>
        <div class="color-control control">
            <input type="color" id="picker-controls-c1" />
            <div class="range-control">
                <label for="picker-controls-c1-opct">Opacity</label>
                <input type="range" id="picker-controls-c1-opct" min="0" max="100" step="1" />
                <span class="current-value"></span>
            </div>
        </div>
    </div>
    <div class="field">
        <label for="picker-controls-c2">
            End color
        </label>
        <div class="color-control control">
            <input type="color" id="picker-controls-c2" />
            <div class="range-control">
                <label>Opacity</label>
                <input type="range" id="picker-controls-c2-opct" min="0" max="100" step="1" />
                <span class="current-value"></span>
            </div>
        </div>
    </div>
</div>

JavaScript

$(function() {
    var id = 'picker',
    	$controls = $('#' + id + '-controls'),
      $direction = $('#' + id + '-controls-direction'),
      $start = $('#' + id + '-controls-start'),
      $c1Color = $('#' +id + '-controls-c1'),
      $c1Opacity = $('#' +id + '-controls-c1-opct'),
      $c2Color = $('#' + id + '-controls-c2'),
      $c2Opacity = $('#' + id + '-controls-c2-opct'),
      $rangeWrappers = $controls.find('.range-control');
      
     $rangeWrappers.each(function() {
     		console.log(this)
     		var $this = $(this),
        	$field = $this.find('input[type="range"]'),
	        $valueSpĂĄn = $this.find('.current-value')

        $field.on('input', function(e) {
        	console.log(e)
        	$valueSpan.text($field.val())
        })
     })
})