javascript - Change jQuery UI Slider Value Based on Select Option -

i'm trying setup ticket price calculator shows price per ticket based on selected location.

the values ticket price calculator based on value attribute that's set in select form.

all of code works except $('region').on('change') action. can't data in calculator update new values.

fiddle:

http://jsfiddle.net/2hmcf5wf/1/

js

$(function() {      // setting region variables     switch ( $( '#region' ).val() ) {         case '10':             var cost = 10, time = 300;             break;         case '20':             var cost = 20, time = 600;             break;     }      // slider     $( '#slider' ).slider({         max: time,         min: cost,         step: cost,         value: cost,         slide: function( event, ui ) {             update( cost, time, ui.value );          }     });      // set initial values     $( '#ticket' ).html( '1 ticket' );     $( '#price' ).html( '$' + $( '#slider' ).slider( 'value' ) );      // region change     $( '#region' ).on( 'change', function() {         update();     });  });  function update( cost, time, value ) {       $( '#ticket' ).html( ( value / cost ) + ' ticket' );      $( '#price' ).html( '$' + value ); } 

html:

<select id="region">     <option value="10" >los angeles, ca</option>     <option value="20">new york, ny</option> </select> <div id="slider"></div> <span id="ticket"></span> <div id="slider"></div> <div id="price"></div> 

there couple of issues code, immediate issue update invocation within change listener isn't passing proper arguments. change update(); update(cost, time, this.value) , should work.

additionally (assuming intended behavior use cost , time values calculated @ top in case/switch statement. on region value change you'll want recalculate cost , time variables. in addition, you'll want affect callback in slider. i'd make sure works, basically, make cost , time global variables , update them prior update function invocations.

var cost, time;  $(function() {     // setting region variables     changeregion($( '#region' ).val());      // slider     $( '#slider' ).slider({         max: time,         min: cost,         step: cost,         value: cost,         slide: function( event, ui ) {             update(ui.value);         }     });      // set initial values     $( '#ticket' ).html( '1 ticket' );     $( '#price' ).html( '$' + $( '#slider' ).slider( 'value' ) );      // region change     $( '#region' ).on( 'change', function() {         changeregion(this.value);         update(this.value);     });  });  function changeregion(value) {   switch ( value ) {       case '10':           cost = 10, time = 300;           break;       case '20':           cost = 20, time = 600;           break;   } }  function update( value ) {     $( '#ticket' ).html( ( value / cost ) + ' ticket' );     $( '#price' ).html( '$' + value ); } 

edit:

also, in addition, you'll need refresh slider update reflected changes in time , cost variables. see how refresh jquery ui slider after setting min or max values? example, you'll need invoke in order slider reflect changes:

sliderobject.slider("option", "min", cost); sliderobject.slider("option", "step", cost); sliderobject.slider("option", "max", time); sliderobject.slider("value", cost);