"Simplicity is the Ultimate Sophistication"

🇧🇷

An Alternative for Vanilla Javascript Applications

• Documentation
• Blog
• Demos

Download Boilerplate

Html Static Boilerplate ⤓

Code Show

index.htm

<x-range class="range">
    <label>Weight: <strong class="number">75</strong> kg</label><br />
    <input type="range" name="weight" min="10" max="200" value="75" />
</x-range>

components/range/index.js

export default function range ({ main, elm }) {

    const number = elm.querySelector('.number')

    main( _ =>[
        register
    ])

    const register = ({ on }) => {
        on('input', 'input[type=range]', update )
    }

    const update = event => {
        number.innerText = event.target.value
    }
})

With State Management

<x-range class="range">
    <template>
        <label>Weight: <strong class="number">{{ number }}</strong> kg</label><br />
        <input type="range" name="weight" min="10" max="200" value="75" data-static />
    </template>
</x-range>

components/range/index.js

export default function range ({ main, state }) {

    main( _ =>[
        register
    ])

    const register = ({ on }) => {
        on('input', 'input[type=range]', update )
    }

    const update = event => {
	state.set( state => state.number = event.target.value )
    }
})

export const model = {
    number: 75
}

License

MIT