slider-binding

    <!-- {{>box}}-->
    <div class='box'
         style="top: {{ pos.top }}px;
                height: 200px;
                width: 300px;">
    </div>
    <!-- {{/box}} -->

    {{#box1}}
    {{>box}}
    <input type="range" class='h'
           max="{{size.height}}"
           value="{{ pos.top }}"
           style="left: {{ pos.left }}px;
               width: {{size.height + thumb}}px;
               top: {{-thumb/2}}px;
               transform-origin: {{thumb/2}}px"/>
    {{/}}


    <p>{{ JSON.stringify(pos) }}</p>

<style>

.h {

    position: absolute;
    transform: rotateZ(90deg);
    transform-origin: 0 0;
    border: 0; margin: 0;
}

.box {
    position: absolute;
    background: lightgreen;
}
p {
    float: right;
}
</style>
<script>
var r = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        thumb: 14,
        box1: {
            pos: {
                left: 50,
                top: 0
            },
            size: {
                width: 300,
                height: 200
            }
        },
        box2: {
            pos: {
                left: 50,
                top: 300
            },
            size: {
                width: 300,
                height: 200
            }
        }
    }
})
</script>