JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div>
    <label for="quantity" id="quantity-value">X</label>
    <input type="range" id="quantity">
</div>

CSS

div {
    display: block;
    padding: 10px 0;
    position: relative;
    text-align: center;
}

label {
    display: block;
}

input {
    display: block;
    margin: 10px auto;
    position: relative;
}

JavaScript

$(function () {
    var _range,
        _label,
        _values,
        calctext;

    _range = $('#quantity');
    _label = $('#quantity-value');
    
    _values = [1,2,3,4,5,6,7,8,9,
               10,15,20,25,30,35,40,45,
               50,60,70,80,90,
               100,125,150,175,200,225,
               250,300,350,400,450,
               500,600,700,800,900,"1,000"];

    _range.attr({'min': '0',
                 'max': _values.length -1});
    
    calctext = function (val) {
        var result = _values[parseInt(val)];
        _label.text(result + ',000');
    }
    
    _range.on('change', function () {
        calctext($(this).val());
    });
    
    _range.val(0);
    calctext(0);
    
    
});