JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Память (RAM)
<div disabled="true" id="slider_1"></div> <span id="ram"></span>
<br>
CPU     
<div disabled="true" id="slider_2"></div> <span id="cpu"></span>
<br>    
HDD      
<div id="slider_3"></div> <span id="hdd"></span>
<br>      
PRICE      
<div id="slider_4"></div> <span id="price"></span>
<br>      
<!-- <input id="amount"></input> -->

JavaScript

$(function() {
 
    var weightSliderValue = 0;
    var exerciseSliderValue = 0;
    
    function changeValue(id, value){
        var currentSliderValue = weightSliderValue - exerciseSliderValue;
        
        $( id ).text( value );
        
    }
    
    $( "#slider_1" ).slider({
      value:0,
      min: 0,
      max: 16000,
      step: 128,
      slide: function( event, ui ) {
          weightSliderValue = ui.value;
          changeValue('#ram', ui.value);
      }
    });

    $( "#slider_2" ).slider({
      value:0,
      min: 0,
      max: 8,
      step: 1,
      slide: function( event, ui ) {         
          exerciseSliderValue = ui.value;
          changeValue('#cpu', ui.value);
      }
    });
    
    $( "#slider_3" ).slider({
      value:0,
      min: 0,
      max: 200000,
      step: 1024,
      slide: function( event, ui ) {         
          exerciseSliderValue = ui.value;
          changeValue('#hdd', ui.value);
      }
    });
    
    $( "#slider_4" ).slider({
      value:0,
      min: 0,
      max: 2000,
      step: 50,
      slide: function( event, ui ) {         
          exerciseSliderValue = ui.value;
          changeValue('#price', ui.value);
      }
    });
    
  });