JSFiddle - React, Tailwind, and code Playground

Slider range configurations

by tonytlwu

HTML

<div class="field">
  <h4>Initial</h4>

  <p><label>Minimum</label><br><input type="text" data-prop="min" placeholder="Default: 0" /></p>
  <p><label>Maximum</label><br><input type="text" data-prop="max" placeholder="Default: 100" /></p>
  <p><label>Step</label><br><input type="text" data-prop="step" placeholder="Default: 1" /></p>

  <p><strong>Output</strong> (Value: <span class="value"></span>)<br><input type="range" /></p>

</div>

<hr>

<div class="field">
  <h4>Partially filled in</h4>

  <p><label>Minimum</label><br><input type="text" data-prop="min" placeholder="Default: 0" /></p>
  <p><label>Maximum</label><br><input type="text" data-prop="max" placeholder="Default: 100" value="10" /></p>
  <p><label>Step</label><br><input type="text" data-prop="step" placeholder="Default: 1" /></p>

  <p><strong>Output</strong> (Value: <span class="value"></span>)<br><input type="range" max="10" /></p>
</div>

<hr>

<div class="field">
  <h4>Min/max adjusted</h4>

  <p><label>Minimum</label><br><input type="text" data-prop="min" placeholder="Default: 0" value="200" /></p>
  <p><label>Maximum</label><br><input type="text" data-prop="max" placeholder="Default: 200" /></p>
  <p><label>Step</label><br><input type="text" data-prop="step" placeholder="Default: 1" /></p>

  <p><strong>Output</strong> (Value: <span class="value"></span>)<br><input type="range" min="200" /></p>
</div>
<hr>
<div class="field">
  <h4>Large step</h4>

  <p><label>Minimum</label><br><input type="text" data-prop="min" value="0" /></p>
  <p><label>Maximum</label><br><input type="text" data-prop="max" value="10" /></p>
  <p><label>Step</label><br><input type="text" data-prop="step" value="20" /></p>

  <p><strong>Output</strong> (Value: <span class="value"></span>)<br><input type="range" min="0" max="10" step="20" /></p>
</div>

CSS

body { font-family: Arial; font-size: 14px }
::placeholder { opacity: 0.4 }

JavaScript

var defaults = {
  min: 0,
  max: 100,
  step: 1
};

$('[type="range"]').on('input', function() {
	var value = $(this).val();
  
  $(this).parents('p').find('.value').html(value);
}).trigger('input');

$('.field').each(function() {
	var $field = $(this);
  var $range = $field.find('input[type="range"]');
  
  $field.find('input[type="text"]').on('input', function() {
    var prop = $(this).data('prop');
    var value = $(this).val();
    
    if (Number.isNaN(value)) {
    	value = defaults[prop];
    }
    
    $range.prop(prop, value);
  }).trigger('input');
});