JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<div id="slider"></div>

<br />

<input id="sliderValue" />

CSS

#slider 
{
    width: 80%;
}

.ui-slider .ui-slider-handle
{
    width: auto;
    padding: 0.2em;
    text-decoration:none;
}

JavaScript

$("#slider").slider({
    value: 100,
    min: 0,
    max: 500,
    step: 50,
    slide: function(event, ui) {
        if (ui.value == $(this).slider('option', 'max')) {
            $(ui.handle).html('unlimited');
            $('#sliderValue').val('unlimited');
        } else {
            $(ui.handle).html(ui.value);
            $('#sliderValue').val(ui.value);
        }
    }
}).find('a').html($('#slider').slider('value'));

$('#sliderValue').val($('#slider').slider('value'));