JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="product-search">
    
    <li class="alt">
        <label for="tensile-value">Ultimate Tensile Strength</label>
        <input type="text" id="tensile-value" />
        <br />
        <br />
        <div id="tensile" class="slider"></div>						
    </li>
    <br />
    <li>
        <label for="elongation-value">% Elongation</label>
        <input type="text" id="elongation-value" />
        <br />
        <div id="elongation" class="slider"></div>						
    </li>
</ul>

JavaScript

$(function() {
    var settings = {
        "yield" : {
            range: true,
            min : 15.2,
            max : 308,
            step : 0.3,
            values : [75.8, 241.4]
        },
        "tensile" : {
            range: true,
            min : 37.7,
            max : 345,
            step : 0.3,
            values : [81.2, 243.3]
        },
        "elongation" : {
            range: true,
            min: 1.0,
            max: 77,
            step: 0.1,
            values: [14.5, 43.2]
        }
    }

    $.each(settings, function(key, value){
        var _key = key;
        $( "#" + _key ).slider(
            $.extend(value, { 
                slide: function( event, ui ) {
                    $( "#" + _key + "-value" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                }
            })
        );
        $( "#" + _key + "-value" ).val( $( "#" + _key ).slider("values", 0) + " - " + $( "#" + _key ).slider("values", 1));
    });
});