How can I replace this price slider with a simple HTML select in this PHP page? Can the select option pass 2 values (min and max price)?

Question

I am pretty new in PHP and I am absolutly not into front end (I am more a Java backend guy) and I have the following problem (I think pretty simple to someone having some PHP\\frontend background).

I am working on a very old style PHP web application.

Into a page I have a form containing a price slector through which the user can choose a price range for a searchedproduct (something like from 50$ to 100$ ). Using the selector the use chose the min prince and the max prince in the range. For the slider it is using this JavaScript library: https://refreshless.com/nouislider/

This is the price range slider into the PHP code of my search page:

<div class="nouislider-wrapper">
    <div class="nouislider" data-min="0" data-max="<?php echo $max_price; ?>" data-start="<?php echo "[".$price_min.",".$price_max."]"; ?>" data-step="10" data-direction="<?php echo RTL_DIR; ?>" data-input="price_range"></div>
    <?php echo $texts['PRICE']." / ".$texts['NIGHT']; ?> : <?php echo CURRENCY_SIGN; ?> <input type="text" name="price_range" class="slider-target" id="price_range" value="" readonly="readonly">
</div>

Ok, from what I have understood it simply put the min price into a $price_min and the max price into the $price_max .

I need to remove the previous slider and replace it with a simple dropdown menu, something like a simple HTML select tag, something like this:

<select>
    <option value="XXX">50$-100$</option>
    <option value="YYY">100$-150$</option>
    <option value="ZZZ">150$-200$</option>
    <option value="WWW">200$+</option>
</select> 

My problem is: how can I pass the 2 values (for example 50 and 100) when an user select a voice from this select tab? Is it possible pass the 2 values ( $price_min and $price_max ) into an option element of a select tag?

If it is possible I prefear don't change logici (passing other values) because it is a very legacy application and it could be complicated handle the changes it the backend that uses these values, so if I can do it in the select it's better.

What do you think about it?

Answer 1

you can not pass both value separately in selecttag but you can do it like

<select name="range">
    <option value="<?php echo $price_min.'-'.$max_price; ?>"><?php echo $price_min.'$-'.$max_price.'$'; ?></option>
</select>

now you have to do some stuff in php side

<?php
// suppose you select 50$-100$ you get 50-100 in $range 
$range = $_POST['range'];
$values = explode("-",$range);
$min_value = $values[0]
$max_value = $values[1] 
?>