JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/12.1.0/nouislider.min.js"></script>
<table class="table">
  <tr>
    <td colspan="3">
      <label for="nouisliderpHKH">Slider 0-100% with step 10</label>
      <div class="withpip" id="nouisliderpHKH"></div>
    </td>
  </tr>

  <tr>
    <td colspan="3">
      <label for="nouisliderpHhyste">Slider 0-1 with step 0.5</label>
      <div class="withpip" id="nouisliderpHhyste"></div>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <label for="pips-values-stepped">With step</label>
      <div class="withpip" id="pips-values-stepped"></div>
    </td>
  </tr>
  <tr>
    <td>
      <p>
        This is getting overwriten.
      </p>
    </td>
  </tr>
</table>

CSS

.noUi-tooltip {
  display: none;
}

.noUi-active .noUi-tooltip {
  display: block;
}

.withpip {
  margin-bottom: 30px
}

.noUi-horizontal {
  width: 400px
}

JavaScript

var range_kh_slider = {
  'min': [0, 10],
  '10%': [10, 10],
  '50%': [50, 10],
  'max': [100]
};

var sliderph_KH = document.getElementById('nouisliderpHKH');
noUiSlider.create(sliderph_KH, {
  range: range_kh_slider,
  start: [0],
  tooltips: [true],
  pips: {
    mode: 'values',
    values: [0, 50, 100],
    density: 10,
    stepped: true
  },
});


//-------------------------------------------------------------
var range_hy_slider = {
  'min': [0, 0.05],
  '10%': [0.1, 0.05],
  '50%': [0.5, 0.05],
  'max': [1]
};
var sliderph_HY = document.getElementById('nouisliderpHhyste');
noUiSlider.create(sliderph_HY, {
  range: range_hy_slider,
  start: [0],
  tooltips: [true],
  pips: {
    mode: 'values',
    values: [0, 0.4,0.5,0.6, 1],
    format: { from: Number, to: function(v) { return v.toFixed(3); } },
    density: 10,
    stepped: true
  },
});

//-------------------------------------------------------------
var range_all_sliders = {
  'min': [0],
  '10%': [500, 500],
  '50%': [4000, 1000],
  'max': [10000]
};
var pipsValuesStepped = document.getElementById('pips-values-stepped');
noUiSlider.create(pipsValuesStepped, {
  range: range_all_sliders,
  tooltips: [true],
  start: 0,
  pips: {
    mode: 'values',
    values: [50, 552, 4651, 4952, 5000, 7080, 9000],
    density: 4,
    stepped: true
  }
});