JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinModern.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.7/paper/bootstrap.min.css">
<div class="container" id="main">
  <div class="well">
    <div class="row">
      <div class="col-md-6 col-xs-12">
        <p class='lead'>Tune HyperParameters</p>
        <div class="row heading">
          <div class="col-xs-3">Parameter</div>
          <div class="col-xs-6">Value(s)</div>
          <div class="col-xs-3">Size</div>
        </div>
        <div class="row">
          <div class="col-xs-3 measure">Cost</div>
          <div class="col-xs-6">
            <input type="text" class="js-range-slider" value="" />
          </div>
          <div class="col-xs-3">
            <input type="number" class='form-control' value=3 />
          </div>
        </div>
        <div class="row">
          <div class="col-xs-3 measure">Gamma</div>
          <div class="col-xs-6">
            <input type="text" class="js-range-slider" value="" />
          </div>
          <div class="col-xs-3">
            <input type="number" class='form-control' value=2 />
          </div>
        </div>
        <div class="row">
          <div class="col-xs-3 measure">Coef0</div>
          <div class="col-xs-6">
            <input type="text" class="js-range-slider" value="" />
          </div>
          <div class="col-xs-3">
            <input type="number" class='form-control' value=2 />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
...

CSS

#main {
  margin-top: 20px;
}

.range-slider {
  position: relative;
  height: 40px;
}

.measure {
  margin-top: 15px;
}

input[type="number"] {
  height: 30px;
}

.heading {
  margin-bottom: 20px;
  font-weight: bold;
}

JavaScript

var $range = $(".js-range-slider");

$range.ionRangeSlider({
  type: "double",
  min: 0,
  max: 1,
  step: 0.1,
  from: 0.2,
  to: 0.6,
  grid: true
});