JQuery UI Slider

Sample code for a JQuery UI slider

by Christian Sonne

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

let values = [50, 100, 150]
let slider = $("#slider").slider({
  values,
  min: 0,
  max: 500,
  slide: function(event, ui) {
    let amounts = [0].concat(ui.values).concat([$(this).slider('option', 'max')]);
    amounts = amounts.slice(1).map(function(n, i) {
      return n - amounts[i];
    })
    if (amounts.filter(x => x < 1).length) return false

    $("#slider-value").html(amounts.toString());
  }
});

$("#slider-value").html($('#slider').slider('value'));