zf-slider component options and value

[jamiechong]

How can I set the option in the {{zf-slider}} component so I can specify data-start, data-end , data-step, data-initial-start, etc?

Furthermore, how can I access the value that is set in the <input>?

It seems like all we get is the UI, which is useless unless its functional. Could you provide a better example of this component?

[GCheung55]

The documentation and example can use an update to demonstrate the options and retrieving the value.

I'm AFK but a change action added to the input should help suraface the sliders value.

Try either of the following.

{{input onchange=(action "sliderChanged" value="target.value")}}

<input onchange={{action "sliderChanged" value="target.value"}}>

You'll need to add an action to capture the sliders value, name it anything you like. "sliderChanged" is just an example.

Edited: Corrected second example.

[jamiechong]

@GCheung55 The first example isn't working and the second example isn't valid ember.

[GCheung55]

@jamiechong sorry about that - bad copy/paste job. I've edited the second example.

[GCheung55]

Looked into this some more. Sorry, but my two suggestions will not work. I couldn't find any Foundation-sites documentation for this, but their code sheds some light.

There are two main events that are triggered when the slider moves and changes: moved.zf.slider and changed.zf.slider. Both are triggered on the element. In Ember's case, it is the component's element.

Attaching event handlers is demonstrated in #72. You'll need to create a component that extends from zf-slider and add a handleInsert method.

Attaching event handlers manually like this is the only solution until zf components support Foundation's events.