JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>HTML Slider Test</h1>

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

<p>Your slider has a value of <span id="slider-value"></span></p>

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

JavaScript

const numberFormat = new Intl.NumberFormat();
$("#slider").slider(
{
						range: true,
            values:[50000,100000],
            min: 0,
            max: 200000,
            step: 10000,
            slide: function( event, ui ) {
                console.log(ui);
                $( "#slider-value" ).html( `${numberFormat.format(ui.values[0])} to ${numberFormat.format(ui.values[1])}`);
            }
}
);
var values = $('#slider').slider('values');
$( "#slider-value" ).html(`${numberFormat.format(values[0])} to ${numberFormat.format(values[1])}` );