index.html

    </div>


    <script src="js/rSlider.min.js"></script>
    <script src="src/js/rSlider.js"></script>
    <script src="src/js/restClient.js"></script>
    <script>
        (function() {
            'use strict';

            var init = function() {
            function getArrayValues(values) {
                if (values.indexOf(',') > 0) {
                    var stringValues = values.split(',');
                    var intValues = [];

                var slider2 = new rSlider({
                    for (var i = 0; i < stringValues.length; i++) {
                        intValues.push(parseInt(stringValues[i]));
                    }

                    return intValues;
                }

                return [parseInt(values)];
            }

            function run(config) {
                console.log('config', config);

                const mode = config.modes[config.active];

                var simv = new rSlider({
                    target: '#slider2',
                    values: {
                        min: 0,
                        max: 30
                        min: mode.simv.min,
                        max: mode.simv.max
                    },
                    range: true,
                    step: 1,
                    set: [5, 12],
                    set: mode.simv.value,
                    tooltip: true,
                    labels: false,
                    onChange: function(vals) {
                        console.log(vals);
                        console.log(getArrayValues(vals));

                        var newConfig = Object.assign({}, config);
                        newConfig.modes[newConfig.active].simv.value = getArrayValues(vals);

                        RestClient.postConfig(newConfig, function (response) {
                            console.log('new config saved', response);
                        })
                    }
                });

                var slider3 = new rSlider({
                var tidal_volume = new rSlider({
                    target: '#slider3',
                    values: {
                        min: 0,
                        max: 500
                        min: mode.tidal_volume.min,
                        max: mode.tidal_volume.max
                    },
                    step: 10,
                    range: false,
                    set: [250],
                    set: mode.tidal_volume.value,
                    scale: true,
                    labels: false,
                    onChange: function(vals) {
                        console.log(vals);
                        console.log(getArrayValues(vals));

                        var newConfig = Object.assign({}, config);
                        newConfig.modes[newConfig.active].tidal_volume.value = getArrayValues(vals);

                        RestClient.postConfig(newConfig, function (response) {
                            console.log('new config saved', response);
                        })
                    }
                });

                var slider = new rSlider({
                var peep = new rSlider({
                    target: '#slider',
                    values: {
                        min: 0,
                        max: 30
                        min: mode.peep.min,
                        max: mode.peep.max
                    },
                    step: 1,
                    range: true,
                    set: [6, 20],
                    set: mode.peep.value,
                    scale: false,
                    labels: false,
                    onChange: function(vals) {
                        console.log(vals);
                        console.log(getArrayValues(vals));

                        var newConfig = Object.assign({}, config);
                        newConfig.modes[newConfig.active].peep.value = getArrayValues(vals);

                        RestClient.postConfig(newConfig, function (response) {
                            console.log('new config saved', response);
                        })
                    }
                });

                var slider4 = new rSlider({
                var i_ratio = new rSlider({
                    target: '#slider4',
                    values: {
                        min: 0,
                        max: 4
                        min: mode.i_ratio.min,
                        max: mode.i_ratio.max
                    },
                    step: 1,
                    range: false,
                    set: [1],
                    set: mode.i_ratio.value,
                    scale: true,
                    labels: false,
                    onChange: function(vals) {
                        console.log(vals);
                        console.log(getArrayValues(vals));

                        var newConfig = Object.assign({}, config);
                        newConfig.modes[newConfig.active].i_ratio.value = getArrayValues(vals);

                        RestClient.postConfig(newConfig, function (response) {
                            console.log('new config saved', response);
                        })
                    }
                });
                var slider5 = new rSlider({
                var e_ratio = new rSlider({
                    target: '#slider5',
                    values: {
                        min: 0,
                        max: 4
                        min: mode.e_ratio.min,
                        max: mode.e_ratio.max
                    },
                    step: 1,
                    range: false,
                    set: [1],
                    set: mode.e_ratio.value,
                    scale: true,
                    labels: true,
                    onChange: function(vals) {
                        console.log(vals);
                        console.log(getArrayValues(vals));

                        var newConfig = Object.assign({}, config);
                        newConfig.modes[newConfig.active].e_ratio.value = getArrayValues(vals);

                        RestClient.postConfig(newConfig, function (response) {
                            console.log('new config saved', response);
                        })
                    }
                });
            };

            function init() {
                RestClient.getConfig(run);
            }


            if (document.readyState != 'loading'){
                init();
            if (document.readyState != 'loading') {
                RestClient.getConfig(init);
            } else {
                document.addEventListener('DOMContentLoaded', init);
            }
 32  src/js/restClient.js 
@@ -0,0 +1,32 @@
(function () {
    var host = "http://192.168.1.6:5000";
    var configUrl = host + '/config';

    window.RestClient = {
        getConfig: function (cb) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    cb(JSON.parse(this.responseText))
                }
            };

            xhr.open("GET", configUrl, true);
            xhr.send();
        },
        postConfig: function (data, cb) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    cb(JSON.parse(this.responseText))
                }
            };

            xhr.open("POST", configUrl, true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.send(JSON.stringify(data));
        }
    };
})();