Sign Up
Go Pro Sign Up Login

Buy Now and unlock this series

$

49

.99

yours forever

Become a Pro and unlock everything

$

24

.99

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.

Downloads

Become a pro to download code and videos

Comments

User avatar

Teddy

about 2 months 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



Want to join the conversation?

Become a Pro member today!