JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.js"></script>
<link rel="stylesheet" href="ttp://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
<script src="http://foundation.zurb.com/docs/assets/js/templates.js"></script>
<script src="http://foundation.zurb.com/docs/assets/js/all.js"></script>
<div class="row">
    <div class="small-10 medium-11 columns">
        <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;"> <span class="range-slider-handle" role="slider" tabindex="0"></span>
 <span class="range-slider-active-segment"></span>

        </div>
    </div>
    <div class="small-2 medium-1 columns"> <span id="sliderOutput3"></span>

    </div>
</div>

JavaScript

$(document).foundation({
    slider: {
        on_change: function () {
            var value = $('.range-slider').attr('data-slider');
            setTimeout(function () {
                $('#sliderOutput3').html(value + '$');
            }, 0);
        }
    }
}).foundation('joyride', 'start');