JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#slider {
    width: 400px;
    float: left;
    margin: 3px 20px 0 0;
}

#count {
    font-size: 16px;
    color: #999;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

JavaScript

var mCounter = $('#count');

$('#slider').slider({
    min: 1,
    max: 11,
    range: true,
    values: [4, 4],
    slide: function(event, ui) {
        var text;

        if (ui.values[0] === ui.values[1]) {
            if (ui.values[1] == 11) {
                text = 'Unlimited';
            } else {
                text = ui.values[0];
            }
        } else {

            if (ui.values[1] == 11) {
                text = '> ' + ui.values[0];
            } else {
                text = ui.values[0] + ' - ' + ui.values[1];
            }
        }

        mCounter.text(text);
    }
});