JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.3/nouislider.min.css">
<div class="container">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                    <div class="col-sm-6">
                        <div class="viPmtNum1" style="display: block;">
                            <div class="form-group validator-container slider-container has-pips">
                                <label class="control-label" for="iPmtNum1">
                                    <span class="liPmtNum1">Would like pips to hit every integer value</span>
                                    <span class="sviPmtNum1"></span>
                                </label>
                                <div class="slider-control slider-iPmtNum1" data-slider-type="nouislider"></div>
                                <input name="iPmtNum1" type="text" value="15" id="iPmtNum1" class="form-control hidden d-none iPmtNum1 skipRBLe">
                            </div>
                        </div>
                        <div class="viPmtNum2" style="display: block;">
                            <div class="form-group validator-container slider-container has-pips">
                                <label class="control-label" for="iPmtNum2">
                                    <span class="liPmtNum2">Small pips hit multiples of 5</span>
                                    <span class="sviPmtNum2"></span>
                          ...

CSS

/* debug css */
.container {
    margin-top: 15px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px !important;
    width: 1170px !important;
}

/*app core css*/
/* noUIslider */
.noUi-base .noUi-handle:focus {
    outline: none;
}

.noUi-base * {
	-moz-transition: none;
	-o-transition: none;
	-webkit-transition: none;
	transition: none;
}

.noUi-base .noUi-origin {
	-webkit-transition: left .1s, top .1s;
	-moz-transition: left .1s,top .1s;
	-o-transition: left .1s,top .1s;
	transition: left .1s,top .1s;
}

.noUi-base .noUi-connect {
	-webkit-transition: background 450ms;
	-moz-transition: background 450ms;
	-o-transition: background 450ms;
	transition: background 450ms;
}

.noUi-target {
	border-radius: 0;
	box-shadow: none;
	border: none;
	background: none;
	background-image: url('https://btr.lifeatworkportal.com/admin/management/shared.bootstrap/img/icon-slider-fg.png');
	background-repeat: repeat-x;
	background-position: center;
}

.noUi-origin {
	border-radius: 0;
}

.noUi-handle {
	box-shadow: none;
	border: none;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

	.noUi-handle:after,
	.noUi-handle:before {
		content: none;
		font-size: 10px;
	}

.noUi-connect, [disabled] .noUi-connect {
	background: none;
	background-image: url('https://btr.lifeatworkportal.com/admin/management/shared.bootstrap/img/icon-slider-bg.png');
	background-repeat: repeat-x;
	background-position: center;
	border: none;
	box-shadow: none;
}
[disabled] .noUi-connect {
	background-image: url('https://btr.lifeatworkportal.com/admin/management/shared.bootstrap/img/icon-slider-fg.png');
}

div[disabled] .noUi-handle, div[disabled] .noUi-horizontal .noUi-handle {
	background: #e7e7e7;
}

.noUi-target.noUi-connect {
	box-shadow: none;
}

/*
If pips turned on, we want them
.noUi-marker-horizontal.noUi-marker {
	display: none;
}
*/
.noUi-value-horizontal {
	padding-top: 10px;
	/*
	padding-top:...

JavaScript

// Simulate building up our slider
function ConfigSlider(id, minValue, maxValue, defVal, pipValuesString, pipsDensity, pipsMode) {
  var slider = $(".slider-" + id)[0];
  $(".slider-" + id).data("min", minValue);
  $(".slider-" + id).data("max", maxValue);

  var pipsLargeValues = pipValuesString != "" ? pipValuesString.split(',').map(Number) : [0, 25, 50, 75, 100];

  var pips = pipsMode != ""
  ? {
    mode: pipsMode,
    values: pipsLargeValues,
    density: pipsDensity,
    stepped: true
  }
  : undefined;

  var sliderOptions = {
    start: defVal * 1,
    step: 1,
    behaviour: 'tap',
    connect: 'lower',
    pips: pips,
    range: {
      'min': minValue * 1,
      'max': maxValue * 1
    },
    animate: true
  };

  noUiSlider.create(
    slider,
    sliderOptions
  );

  slider.noUiSlider.on('update.RBLe', function (values, handle) {
    var value = this.get();
    $("." + id).val(value);
    $("." + id + "Label, .sv" + id).html(value);
  });
}

// id, minValue, maxValue, defVal, pipValuesString, pipsDensity, pipsMode


ConfigSlider("iPmtNum1", 2, 15, 5, "2,5,10,15", 7, "values");
ConfigSlider("iPmtNum2", 10, 100, 25, "10,25,50,75,100", 5, "values");
ConfigSlider("iPmtNum3", 0, 100, 25, "", 5, "positions");