JSFiddle - React, Tailwind, and code Playground

HTML

<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>

JavaScript

//This should have each valid amount that can be selected in the slider 
var sliderAmountMap = [10000, 20000,30000, 40000, 45000,50000,65000];
 
$(function() {
    $( "#slider" ).slider({
        value: 4, //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 selected "value" with lookup array
        }
    });
    $( "#amount" ).val( "$" + sliderAmountMap[$( "#slider" ).slider( "value")] );//map selected "value" with lookup array
});