JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div class="demo"> 
 
<p> 
<label for="amount">Are you gay?:</label> 
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 
<div id="slider-range-max"></div> 
 
</div><!-- End demo -->

JavaScript

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