search

ranile / material-yew

Yew wrapper for Material Web Components
https://material-yew.rm.rs
Apache License 2.0
230 stars 35 forks source link

I don't understand how to receive the value of a Slider #17

Open mwberry opened 2 years ago

mwberry commented 2 years ago

I'm very much a novice when it comes to web development, so maybe this is supposed to be self-evident, but I don't understand how to receive the value of a MatSlider when it changes. The slider demo doesn't exercise this functionality at all. I was reading through the source and I can see how the JavaScript event is marshalled into a CustomEvent holding an InputEvent. However I can't figure out to access the current value of the slider from within the update method. The CustomEvent::detail method returns a JsValue which should be an InputEvent. I figured out how to cast that. But I expected the InputEvent::detail to contain an integer, but it's always zero. Or maybe InputEvent::data, except that's always None. Maybe the cast didn't really work an I'm just getting Default::default()?

I'm probably missing something important because I feel like I shouldn't be diving into web_sys just to get the current value of a slider.

A quick illustration would clarify a lot. Thanks.

dirkvdb commented 2 years ago

I have the same issue...

ranile commented 2 years ago

Hi, sorry for the late response.

The material-web components used by this library are quite old. There have been breaking changes and I haven't had the time to dedicate to fixing things up. As mentioned in the issue linked in MatSlider's documentation, the component was re-written. I don't know if the new component will work out of the box.

Right now, you can find out how to handle this by logging the value of event passed to console (see gloo-console::log!). You can find out the name of the property which has the slider's value and access it from the CustomEvent.

Here's an example of how to use the CustomEvent::detail() property:

https://github.com/hamza1311/material-yew/blob/70721c1c6bebb716aa8654f45c1ef4f67463fb0c/material-yew/src/list/action_detail.rs#L15-L31