<div id="ios-continuous"></div>
Proportion overlap: <span id="continuous-ios-overlap"></span>
Proportion distance: <span id="continuous-ios-distance"></span>

const iosContinuous = new Ios({el: 'ios-continuous'});

const continuous_ios_distance_input = document.getElementById('continuous-ios-distance');
const continuous_ios_overlap_input = document.getElementById('continuous-ios-overlap');

document.getElementById('ios-continuous').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                continuous_ios_distance_input.innerHTML = iosContinuous.proportionDistance;
                continuous_ios_overlap_input.innerHTML = iosContinuous.proportionOverlap;
            },
            false)
    }, false
);

<div id="ios-step-choice"></div>
IOS score: <span id="step-ios-score"></span>
Proportion overlap: <span id="step-ios-overlap"></span>
Proportion distance: <span id="step-ios-distance"></span>

const iosStepChoice = new Ios({
    el: 'ios-step-choice',
    buttonsClass: 'btn btn-outline-secondary',
    numberCircles: 7
});

const step_choice_ios_distance_input = document.getElementById('step-ios-distance');
const step_choice_ios_overlap_input = document.getElementById('step-ios-overlap');
const step_choice_ios_score_input = document.getElementById('step-ios-score');

document.getElementById('ios-step-choice').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                step_choice_ios_distance_input.innerHTML = iosStepChoice.proportionDistance;
                step_choice_ios_overlap_input.innerHTML = iosStepChoice.proportionOverlap;
                step_choice_ios_score_input.innerHTML = iosStepChoice.currentCircle;
            },
            false)
    }, false
);

<div id="ios-pictorial"></div>
IOS score: <span id="pictorial-ios-score"></span>
Proportion overlap: <span id="pictorial-ios-overlap"></span>
Proportion distance: <span id="pictorial-ios-distance"></span>

const iosPictorial = new Ios({
    el: 'ios-pictorial',
    numberCircles: 7,
    manyCircles: true,
    buttonsClass: 'btn btn-outline-secondary',
    direction: 'row'
});

const pictorial_ios_distance_input = document.getElementById('pictorial-ios-distance');
const pictorial_ios_overlap_input = document.getElementById('pictorial-ios-overlap');
const pictorial_ios_score_input = document.getElementById('pictorial-ios-score');

document.getElementById('ios-pictorial').addEventListener(
    'mousedown',
    () => {
        window.addEventListener(
            'mouseup',
            () => {
                pictorial_ios_distance_input.innerHTML = iosPictorial.proportionDistance;
                pictorial_ios_overlap_input.innerHTML = iosPictorial.proportionOverlap;
                pictorial_ios_score_input.innerHTML = iosPictorial.currentCircle;
            },
            false)
    }, false
);