JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css">
<link href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<center>
<h1>
How much can you save?
</h1>
<br>Heaps! How much do you usually eat? Drag the slider below:</center><br>
<input type="range"  name="range" id="range" value="100" step="10000" min="0" max="1000000">
    <br />
    Taco Stands:	Cost per <b><output class="output6">0</output></b> tacos<br>
    TacoTaco <output class="output1">0</output>
    Los Hermanos Tacos<output class="output2">0</output>
    Natcho Taco<output class="output3">0</output>
    Taco Bell<output class="output4">0</output>
    Chipolte<output class="output5">0</output>

CSS

output {
  display: block;
}

JavaScript

$('input[type="range"]').rangeslider({polyfill: false});
$('#range').on("input", function() {
$('.output1').val("$"+parseFloat(this.value*0.0002).toFixed(2));
$('.output2').val("$"+parseFloat(this.value*5.01).toFixed(2));
$('.output3').val("$"+parseFloat(this.value*0.03).toFixed(2));
$('.output4').val("$"+parseFloat(this.value*7.5).toFixed(2));
$('.output5').val("$"+parseFloat(this.value*11.75).toFixed(2));
$('.output6').val(+parseFloat(this.value*1).toFixed(2));
}).trigger("change");