JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="range" min="0" max="10" value="5" />
</div>
<div>
    <h3>Subscribe to touchstart</h3>
    <label><input type="radio" name="subscribe" value="0" checked="checked" />don't</label>
    <label><input type="radio" name="subscribe" value="1"/>bind</label>
    <label><input type="radio" name="subscribe" value="2"/>addEventListener</label>
    <h3>touchstart count</h3>
    <div id="sliderStatus">N/A</div>
</div>

JavaScript

var eventName = 'touchstart';
var counter = 0;

function increaseCounter() {
    $('#sliderStatus').text(++counter);
}

var oldValue = 0;

function subscribeChanged(e) {
    var newValue = e.target.value;

    if (oldValue == 1) {
        $('body').unbind(eventName, increaseCounter);
    }
    else if (oldValue == 2) {
        document.body.removeEventListener(eventName, increaseCounter, false);
    }

    if (newValue == 1) {
        $('body').bind(eventName, increaseCounter);
    }
    else if (newValue == 2) {
        document.body.addEventListener(eventName, increaseCounter, false);
    }

    oldValue = newValue;
}

$(function() {
    $('input[name=subscribe]').bind('change', subscribeChanged);
});