JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class='slide-container'>
  <div class='slide' id='password-strength-slide'></div>
  <div class='min'>0</div>
  <div class='max'>100</div>
  <div class='value'>80</div>
</div>
<div class='range-container'>
  <div class='range' id='password-length-range'></div>
  <div class='min'>4</div>
  <div class='max'>32</div>

  <div class='min-value'>8</div>
  <div class='max-value'>12</div>
</div>
<div class='range-container'>
  <div class='range' id='token-length-range'></div>
  <div class='min'>4</div>
  <div class='max'>16</div>

  <div class='min-value'>3</div>
  <div class='max-value'>4</div>
</div>

JavaScript

jQuery(function($) {
    $.fn.getVal = function(selector) {
      return parseInt(this.children(selector).html(), 10);
    };
    $(".slide-container").each(function(i, v) {
        var $this = $(this);
        $this.children(".slide").slider({
            range: "min",
            animate: true,
            min: $this.getVal(".min"),
            max: $this.getVal(".max"),
            value: $this.getVal(".value"),
            slide: function(event, ui) {
                $(this).children(".value").html(ui.value);
            }
        });
    });
    
    $(".range-container").each(function() {
        var $this = $(this);
        $this.children(".range").slider({
            range: true,
            animate: true,
            min: $this.getVal(".min"),
            max: $this.getVal(".max"),
            values: [$this.getVal(".min-value"), $this.getVal(".max-value")],
            slide: function(event, ui) {
                $(this).children(".min-value").html(ui.values[0]);
                $(this).children(".max-value").html(ui.values[1]);
            }
        });
    });
});