Show and Hide Div based on range slider value using jQuery

Question

I am trying to show a div when the input value reaches 2019 using a range slider. What am I doing wrong? is it something simple. Here is my JSfiddle

$(function() {
  $( "#slider" ).slider({
    value:2015,
    min: 2014,
    max: 2022,
    step: 1,
    slide: function( _event, ui ) {
      $( "#amount" ).val( ui.value );
    }
  });
  $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
} );


$(document).ready(function() {
  
  $("#amount").on('change',function(){
    
    if (this.value == "2019") {
      $("#Red").show();
    }
    else {
      $("#Red").hide();
    }
  });         
  
});

and the DOM

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

<div id="slider"></div>

<div id="Red" class="Box" style="background-color:red; height:100px; width:100px; display: none;">blach</div>

I was trying to figure out the code but I failed.

Cole · Accepted Answer · 2023-02-02 20:20:37Z

0

The change event isn't being fired when the value of the #amount input changes. To make sure it's triggered, you can programmatically force a change event on the #amount input in the function assigned to the slide property of your jQuery slider, like so:

slide: function(event, ui) {
   $("#amount").val(ui.value);
   $("#amount").trigger("change");
}

answered Feb 2, 2023 at 20:20

Cole

8162 gold badges10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show and Hide Div based on range slider value using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related