"Simplicity is the Ultimate Sophistication"

🇧🇷

An Alternative for Vanilla Javascript Applications

• Documentation
• Blog
• Demos

Download Boilerplate

Html Static Boilerplate ⤓

Code Show

index.htm

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

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

...
<div class="range" data-component="range">
    <label>Weight: <strong class="number" v-html="number">75</strong> kg</label><br />
    <input type="range" name="weight" min="10" max="200" value="75" data-static />
</div> 

// Or using template tags

<div class="range" data-component="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>
</div>

components/range/index.js

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

    main( _ =>[
        register
    ])

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

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

export const model = {
    number: 75
}

ScreenCast Demo

Browsers support ^{_{made by godban}}

IE / Edge	Firefox	Chrome	Safari	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

IE11 might need some polyfills in order to work (Promise)

License

MIT