Building an app with jquery mobile (and jquery), I try to use a unique slider in conjunction with a select element to modify different div values. The principe is the following: the user select first a category using the selector (which is defined with the class poolattribute). His selection is registered and depending on the option selected, it should trigger the appropriate function with the slider value as input. My code is the following:

function attribute(){
$
('select[class="poolattribute"]').change(function(){
attr_value 
= $('select[class="poolattribute"] option:selected').val();
console
.log(attr_value);    
if(attr_value === "gender")
{
    $
('#slider').attr('value',1);
    $
('#slider').attr('min',1);
    $
('#slider').attr('max',2);
    $
('#slider').change(function()
    
{
        val 
= $(this).val();        
        gender
(val);
    
}); 


}           
if(attr_value === "weight")
{
    $
('#slider').attr('value',1);
    $
('#slider').attr('min',1);
    $
('#slider').attr('max',8); 
    $
('#slider').change(function()
    
{
        val 
= $(this).val();        
        weight
(val);
    
}); 

    

}
}

The function gender(x) and weight(x) should take the value of the slider to do whatever is required, which is roughly the following:

function gender(val){$("#gender_value_input").val(val);}
function weight(val){$("#weight_value_input").val(val);}

When I start selecting the option weight in the selector and use the slider, it works as it should. However when I choose the option gender, both functions are called with the info from the slider (val). It seems like the two ifs are not recognized anymore, despite the variable attr_value being registered correctly (as shown in the log). Does anyone know what could be happening here? That would be really appreciated.