JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<p>
  <label for="amount">Trust Value:</label>
  <input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;">
</p>
<div id="slider-range-max" style="margin: 0px 10px;"></div>

CSS

.ui-widget-header{
    background: none;
}
.red .ui-slider-range {
    background-color: #ff0000;
}
.green .ui-slider-range {
    background-color: #00ff00;
}

.slider-range-max.ui-widget-content,
.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all {
    background: #ff0000;
    background: -moz-linear-gradient(left, #ff0000 0%, #fca94a 25%, #f8f400 50%, #a1e426 75%, #018e01 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, #ff0000), color-stop(25%, #fca94a), color-stop(50%, #f8f400), color-stop(75%, #a1e426), color-stop(100%, #018e01));
    background: -webkit-linear-gradient(left, #ff0000 0%, #fca94a 25%, #f8f400 50%, #a1e426 75%, #018e01 100%);
    background: -o-linear-gradient(left, #ff0000 0%, #fca94a 25%, #f8f400 50%, #a1e426 75%, #018e01 100%);
    background: -ms-linear-gradient(left, #ff0000 0%, #fca94a 25%, #f8f400 50%, #a1e426 75%, #018e01 100%);
    background: linear-gradient(to right, #ff0000 0%, #fca94a 25%, #f8f400 50%, #a1e426 75%, #018e01 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#018e01', GradientType=1 );
}

JavaScript

$(function() {
  $( "#slider-range-max" ).slider({
    range: "max",
    min: 0,
    max: 10,
    value: 0,
    step: 1,
    slide: function( event, ui ) {
      $( "#amount" ).val( ui.value );
    }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});