JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<p>
<label for="amount">DPI Slider</label>
<br>
<label>Steps 50 for (50 to 4k) </label>
<br>
<label>Steps 100 for (4k to 15k) </label>
<br>
<label>Steps 200 for (15k to 19k) </label>

<br>Selected: <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>

CSS

#slider label {
    position: absolute;
    width: 32px;
    margin-left: -16px;
    text-align: center;
    margin-top: 20px;
}
#slider  {
    position: relative;
    width: 90%;
    margin-left: 5%;
}

JavaScript

//This should have each valid amount that can be selected in the slider 
var sliderAmountMap = [
  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000,
  1050, 1100, 1150, 1200, 1250, 1400, 1450, 1400, 1450, 1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900, 1950, 
  2000, 2050, 2100, 2150, 2200, 2250, 2300, 2350, 2400, 2450, 2500, 2550, 2600, 2650, 2700, 2750, 2800, 2850, 2900, 2950, 
  3000, 3050, 3100, 3150, 3200, 3250, 3300, 3350, 3400, 3450, 3500, 3550, 3600, 3650, 3700, 3750, 3800, 3850, 3900, 3950, 
  4000, 4100, 4200, 4300, 4400, 4500, 4600, 4700, 4800, 4900, 5000, 5100, 5200, 5300, 5400, 5500, 5600, 5700, 5800, 5900, 
  6000, 6100, 6200, 6300, 6400, 6500, 6600, 6700, 6800, 6900, 7000, 7100, 7200, 7300, 7400, 7500, 7600, 7700, 7800, 7900, 
  8000, 8100, 8200, 8300, 8400, 8500, 8600, 8700, 8800, 8900, 9000, 9100, 9200, 9300, 9400, 9500, 9600, 9700, 9800, 9900, 
  10000, 10100, 10200, 10300, 10400, 10500, 10600, 10700, 10800, 10900, 
  11000, 11100, 11200, 11400, 11400, 11500, 11600, 11700, 11800, 11900, 
  12000, 12100, 12200, 12300, 12400, 12500, 12600, 12700, 12800, 12900, 
  14000, 14100, 14200, 14300, 14400, 14500, 14600, 14700, 14800, 14900, 
  14000, 14100, 14200, 14300, 14400, 14500, 14600, 14700, 14800, 14900, 
  15000, 15200, 15400, 15600, 15800, 
  16000, 16200, 16400, 16600, 16800, 
  17000, 17200, 17400, 17600, 17800, 
  18000, 18200, 18400, 18600, 18800, 19000
];
var sliderLabelMap = [50, 1000, 2000, 3000, 4000, 6000, 8000, 10000, 12000, 15000, 19000];

$(function() {
  $("#slider").slider({
    value: 10, //array index of onload selected default value on slider, for example, 45000 in same array will be selected as default on load
    min: 0, //the values will be from 0 to array length-1
    max: sliderAmountMap.length - 1, //the max length, slider will snap until this point in equal width increments
    slide: function(event, ui) {
      $("#amount").val("$" + sliderAmountMap[ui.value]); //map...