jQuery UI Slider bug

HTML

<div id="update">
    <button disabled="disabled">update:</button>
    <button data-range='false'>False</button>
    <button data-range='true'>True</button>
    <button data-range='min'>Min</button>
    <button data-range='max'>Max</button>
</div>
<div id="reset">
    <button disabled="disabled">reset:</button>
    <button data-range='false'>False</button>
    <button data-range='true'>True</button>
    <button data-range='min'>Min</button>
    <button data-range='max'>Max</button>
</div>
<div id="slider"></div>
<table>
    <tr>
        <th>value:</th>
        <td class='val'></td>
    </tr>
    <tr>
        <th>values[]:</th>
        <td class='vals'></td>
    </tr>
    <tr>
        <th>range:</th>
        <td class='range'></td>
    </tr>
</table>

CSS

body {
    text-align: center;
}
#slider {
    margin: 1em;
}
button[disabled] {
    width: 8em;
    color: black;
    opacity: 1;
}
table {
    margin: 0 auto;
    text-align: left;
}
table tr > * {
    border: 1px solid black;
    padding: 0.25em 0.5em;
}
table th {
    font-weight: bold;
}

JavaScript

var S = $('#slider');
$('#update').buttonset();
$('#reset').buttonset();

SLIDE(false);
function SLIDE(RANGE) {
    S.slider({
        min: 0,
        max: 20,
        range: RANGE,
        create: function (event, ui) {
            results($(this));
        },
        change: function (event, ui) {
            results($(this));
        }
    });
}
$('#update').children('button').click(function () {
    S.slider('option', 'range', $(this).data('range'));
    results($('#slider'));
});
$('#reset').children('button').click(function () {
    S.slider('destroy');
    SLIDE($(this).data('range'));
});
function results(e) {
    $('td.range').text(e.slider('option', 'range'));
    if (e.slider('option', 'range') === true) {
        $('td.val').text('null');
        $('td.vals').text(e.slider('values'));
    } else {
        $('td.val').text(e.slider('value'));
        $('td.vals').text('null');
    }
}