JSFiddle - React, Tailwind, and code Playground

by jdv590

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page">

            <div data-role="header">
                <h1>Query</h1>
            </div><!-- /header -->

            <div data-role="content">
                
                <form action="Result.php" method="post" data-ajax="false">
                    <!--                    stock number text box-->
                    <div
                        <label for="stocknumtxt" >Stock Num:</label>
                        <input type="text" id="stocknum" name="stocknumtxt">
                    </div>

                    <div class="priceRangeInfo">
                        <label for="buying_slider_min">Price</label>
                        <input type="range" name="buying_slider_min" id="buying_slider_min" class="minBuyingSlider" value="0" min="0" max="57982" />
                        <input type="range" name="buying_slider_max" id="buying_slider_max" class="maxBuyingSlider" value="57982" min="0" max="57982" data-track-theme="b"/>
                    </div>
                    <div>
                    <div class="priceRangeInfo">
                        <label for="Mileage_slider_min">Milage</label>
                        <input type="range" name="Mileage_slider_min" id="Mileage_slider_min" class="minBuyingSlider" value="0" min="0" max="57982" />
                        <input type="range" name="Mileage_slider_max" id="Mileage_slider_max" class="maxBuyingSlider" value="57982" min="0" max="57982" data-track-theme="b"/>
                    </div>
                    </div>
                    <div class="priceRangeInfo">
                        <label for="Year_slider_min">Year</label>
                        <input type="range" name="Year_slider_min" id="Year_slider_min" class="minBuyingSlider" value="0" min="0" max="57982" />
                        <input...

CSS

.priceRangeInfo{
                position: relative;
                height: 30px;
                margin-top: 60px;
            }
            .priceRangeInfo label{
                position: absolute;
                top: -30px;
                left: 10px;
            }                            /* moves label field */
            .priceRangeInfo #buying_slider_min {
                top: -40px;
                position: absolute;
                left: 100px;
            }       /* moves first input field */ 
            .priceRangeInfo #buying_slider_max{
                top: -40px;
                position: absolute;
                left: 170px;
            }      /* move second input field */ 
            .priceRangeInfo div.ui-slider{
                position: absolute;
            }                   /* move both sliders - adressing 1st slider with CSS is hard */ 
            .priceRangeInfo div:last-child{
                position: absolute;
                left: 0px;
            }


            /*Adjust jquery mobile slider width to stretch width of wholse screen*/
            div.ui-slider{width:90%;}

JavaScript

//dual range slider script
            
            function slider(minID,maxID) {
                $('#' + minID).change(function() {
                    var min = parseInt($(this).val());
                    var max = parseInt($('#' + maxID).val());
                    if (min > max) {
                        $(this).val(max);
                        $(this).slider('refresh');
                    }
                });
                $('#' + maxID).change(function() {
                    var min = parseInt($('#' + minID).val());
                    var max = parseInt($(this).val());

                    if (min > max) {
                        $(this).val(min);
                        $(this).slider('refresh');
                    }
                });
            }
            
            
            $(document).ready(function(){
                slider(buying_slider_min,buying_slider_max);
                slider(Mileage_slider_min,Mileage_slider_max);
                slider(Year_slider_min,Year_slider_max);
            });