JSFiddle - React, Tailwind, and code Playground

by jack_pallot

HTML

<script src="http://jackpallot.me/tempjs/sliderfield.js"></script>
<input type="text" class="rangeSliderField" data-tempvalue="" data-from="{{ settings.minValue }}" data-to="{{ settings.maxValue }}" name="{{ name }}" value="" />

CSS

.rangeSliderField-container {
  width: 100%;
  margin: 3% 0 0 0; 
}
/* Ion.RangeSlider
// css version 1.8.1
// by Denis Ineshin | ionden.com
// ===================================================================================================================*/

/* =====================================================================================================================
// RangeSlider */

.irs {
position: relative; display: block;
}

.irs-line {
position: relative; display: block;
overflow: hidden;
}

.irs-line-left, .irs-line-mid, .irs-line-right {
position: absolute; display: block;
top: 0;
}

.irs-line-left {
left: 0; width: 10%;
}

.irs-line-mid {
left: 10%; width: 80%;
}

.irs-line-right {
right: 0; width: 10%;
}

.irs-diapason {
position: absolute; display: block;
left: 0; width: 100%;
}

.irs-slider {
position: absolute; display: block;
cursor: default;
z-index: 1;
}

.irs-slider.single {
left: 10px;
}

.irs-slider.single:before {
  position: absolute; display: block; content: "";
  top: -50%; left: -100%;
  width: 300%; height: 200%;
  background: rgba(0,0,0,0.0);
}

.irs-slider.from {
left: 100px;
}

.irs-slider.from:before {
  position: absolute; display: block; content: "";
  top: -50%; left: -200%;
  width: 300%; height: 200%;
  background: rgba(0,0,0,0.0);
}

.irs-slider.to {
left: 300px;
}

.irs-slider.to:before {
  position: absolute; display: block; content: "";
  top: -50%; left: 0;
  width: 300%; height: 200%;
  background: rgba(0,0,0,0.0);
}

.irs-slider.last {
z-index: 2;
}

.irs-min {
position: absolute; display: block;
left: 0;
cursor: default;
}

.irs-max {
position: absolute; display: block;
right: 0;
cursor: default;
}

.irs-from, .irs-to, .irs-single {
position: absolute; display: block;
top: 0; left: 0;
cursor: default;
white-space: nowrap;
}

.irs-grid {
position: absolute; display: none;
bottom: 0; left: 0;
width: 100%; height: 20px;
}

.irs-with-grid .irs-grid {
display: block;
}

.irs-grid-pol {
position: absolute;
top:...

JavaScript

$(document).ready(function() {
    $(".rangeSliderField").ionRangeSlider({
        min: 1,
        max: 100,
        type: "single",
        step: 10,
        onFinish: function (obj) {
            var tempVal = $('.rangeSliderField').attr('data-tempvalue');
            $( ".rangeSliderField" ).val(tempVal);
            alert(tempVal);
        }
    });
});