JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
Select a region for pricing:
<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>

CSS

body {
    text-align: center;
    margin: 50px auto;
}

#region {
    display: block;
    margin: 10px auto;
}

#slider {
    margin: 10px auto;
    width: 50%;
}

JavaScript

$(function() {

    // setting up 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 );
}