Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series




yours forever

Become a Pro and unlock everything




per month

Fancy Input

In this video, we will create a robust and reusable input field component to take the place of our current search filter.


Become a pro to download code and videos


User avatar


about 1 year ago

Unfortunately, I was not able to replicate the effect of whatever I typed into the field that was showing in the input box for the search filter. However, it does show it binded just for whatever reason just not to the value in the search filter? just as you typed it.

function handleInput(e) {
    value = type.match(/^(number|range)$/) ? +e.target.value : e.target.value;

    <input on:input={handleInput} {type} {value} {placeholder} />

<input on:input={handleInput} {type} {value} {placeholder} />

Field Component

Search Filter


11 months ago

It's not working for me as well, not sure if this is a svelte versioning issue. a workaround is to create the handleOnInput function on the parent component

Field bind:value={search} on:input={(e) => { search = e.target.value; }} />

Want to join the conversation?

Become a Pro member today!