converting alpinejs code to _hyperscript

[sqllyw]

hi, got a code like following, how to rewrite that into _hyperscript? thanks

<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{  size : 50}">

    <input type="range" min="200" max="1200" x-model="size" />
    <div x-text="size"></div>
    <img src="https://bulma.io/assets/images/placeholders/128x128.png" x-bind:style="{ width: size + 'px' }" />

</div>

https://jsfiddle.net/7rjgkys1/

[andryyy]

On the img something like…

on input from previous <input[type=range]/> set my @width to event.target's value + 'px' end

Writing from mobile on toilette. May be incomplete. I left out the default value.

[sqllyw]

amazing! it works: https://jsfiddle.net/wfvhce29/ what lacking is how to set the default size?

[sqllyw]

made some progress : https://jsfiddle.net/wfvhce29/2/ but the initial width was hard coded into 100px, how to retrieve the value from the input range?

[andryyy]

You can set it like:

set my @width to (value of previous <input[type=range]/>) + 'px'

It’s probably better to assign an ID to the input or closest div and reference it like #bla's value or <input/> in closest #divid etc.

[andryyy]

Or… assign classes within the div and reference them like .input-range in closest <div/>.

That’s a bit more flexible if you repeat those divs.

[sqllyw]

ok, that's a good direction for a newbie like me:) thanks