CODEWITHSUNDEEP
javascriptjquery
code-8
code-8

Reputation: 58760

Detect Slider Change

enter image description here

I have

7 sliders, I tried to show the save button when 1 of my slider got moved.

HTML

 <div class="schedule-sliders device-schedule-sliders time-range" ng-show="device.acl_mode == 3"> .... </div>

I've tried

As you can see device-schedule-sliders is there.

    console.log('A');
    $(".device-schedule-sliders").on('click',function(){
        console.log('clicked');
        alert('RUN');
        $scope.buttonShow.acl = true;
    });
    console.log('B');

I could not get my function to run.

If I tried it on the console

console.log($(".device-schedule-sliders"));

I got 

[prevObject: n.fn.init(1), context: document, selector: ".device-schedule-sliders"]

How would one go about and debug this further?

Updated

Thanks to @Prerak Sola , I update my code and retried give my slider an ID

id="device-schedule-sliders"

<div id="device-schedule-sliders" class="schedule-sliders time-range" ng-show="device.acl_mode == 3">

....

and JS

 $("#device-schedule-sliders" ).on( "slidechange", function( event, ui ) {
        //Toggle your save button
        console.log('clicked');
        alert('RUN');
        $scope.buttonShow.acl = true;
    });

result

still the same, I can not get my alert fn to run.

Upvotes: 1

Views: 2658

Answers (1)

Prerak Sola
Prerak Sola

Reputation: 10019

You could listen for the change event on the sliders. You can do something like: 

$( ".slider-range" ).on( "slidechange", function( event, ui ) {
    //Toggle your save button
});

Reference: docs

Here's a working fiddle which works on id.

Upvotes: 3

Related Questions