Slider button is pressed or released...

How-to Discussions
1

Hi,

At the time when the slider button is pressed or released, I would like to call a function. Is it possible?
How can I this problem solve?

2

I’m not sure what you mean by “slider button”. You can use the Callback action on order to call to a javascript function when activating a trigger. Here are two samples using a switch and a button:

<!-- for button we use the clicked trigger -->
<Button>
    <Clicked>
        <Callback Handler="{someJSFunction}" />
    </Clicked
</Button>

<!-- for switch we use the WhileTrue and WhileFalse triggers to handle the two states -->
<Switch>
    <WhileTrue>
        <Callback Handler="{someJSFunctionWhenSwitchedOn}"/>
    </WhileTrue>
    <WhileFalse>
           <Callback Handler="{someJSFunctionWhenSwitchedOff}"/>
    </WhileFalse>
</Switch>

I hope this helps :slight_smile:

3

Kristian Hasselknippe wrote:

I’m not sure what you mean by “slider button”. You can use the Callback action on order to call to a javascript function when activating a trigger. Here are two samples using a switch and a button:

I use slider property of ValueChanged. This function is making the API call. But in the movement function of each slider is making the API call. This API call is also performing a write operation on the database. I don’t want it. I need last value of slider. Can I get the last value of the slider?

4

Ah ok

Then you can try the Released trigger instead (https://www.fusetools.com/learn/fuse/ux/fuse/gestures/released)

<Slider>
    <Released>
        <Callback Handler="{yoruJSCallback}" />
    </Released>
</Slider>
5

Thank you Kristian. It’s work. But I can’t get args.value.

Function

lampSliderValueChanged: function (args) {
  debug_log("lampSliderValueChange >>> slider_pos  : " + args.value);
  debug_log("lampSliderValueChange >>> args.data.id: " + args.data.id);
}

Debug log

LOG: lampSliderValueChange >>> slider_pos  : undefined
LOG: lampSliderValueChange >>> args.data.id: 16
6

I solved this problem this way:

<Slider Value="{dim_value}" ValueChanged="{SliderValueChanged}">
    <Released>
        <Callback Handler="{SliderReleased}" />
    </Released>
</Slider>


var slider_pos = Observable(0);
...
...
SliderReleased: function (args) {
    if ( (slider_pos.value < 1) ? send_to_api(args.data.id, "0") : send_to_api(args.data.id, slider_pos.value) );},
SliderValueChanged: function (args) {
    var _slider_pos = 0;
    _slider_pos = args.value;
    slider_pos.value = _slider_pos.toFixed(0);

    debug_log("SLIDER_POS" + slider_pos.value);
}