Sometimes you want an interactive document; whereby you move a slider and values on the page changes. A good example of this is on distill.pub and of course Tangle.

Let’s look at some of these components and see what we can do with it in a more “modern” framework, seeing that the library itself hasn’t been updated in years! At its heart, Tangle is essentially a fancy “range” input:

And you want some javascript to do some computation off the values in the slider! The question then is: “How exactly do we do this?”

Let’s take a look at mithril.js:

<div id="m-slider1"></div>

<script>
var root = document.getElementById("m-slider1")
var val = 20 // setting val

var slider = {
  view: function (scope) {
    return m("main", [
        m("p", "range input: " + val),
        m("input[type=range]", {
            min:0,
            max:100,
            step:2,
            value: val,
            oninput: function(){val = this.value;}
        })
    ])
  }
}

m.mount(root, slider)
</script>

If we construct the Tangle document example:

<div id="m-slider2"></div>

<script>
var mslider2 = document.getElementById("m-slider2")
var cookies = 2 // setting val

var cookieCalculator = function(cookies) {return cookies*50}

var cookieSlider = {
  view: function (scope) {
    return m("main", [
        m("label", {
            for:"slider2"
        }, "Cookies: "+cookies),
        m("input[type=range]", {
            min:0,
            max:10,
            step:1,
            value: cookies,
            id: "slider2", 
            oninput: function(){cookies = this.value;}
        }),
        m("p", "When you eat "+ cookies + " cookies, you consume " + cookieCalculator(cookies) + " calories.")
    ])
  }
}

m.mount(mslider2, cookieSlider)
</script>

Unfortunately it doesn’t look as pretty as we would like - more on that next time!