One function interact with another javascript

Question

I've 2 functions that works perfectly. I want to let them work together. One of them is a slider. see the code below.

        <script>
        $(function(){
            $(".cloudslider-handle").slider({
                range:"min",
                value:1,
                min:1,
                max:10,
                slide:function(event,ui){
                    $(".a,.b,.c,.d").width(ui.value * 10+"%");
                }
            });
            $(".ui-slider-handle").text("<>");
            $(".a,.b,.c,.d").width(10+"%");

        });
    </script>

And the other one is a speedometer. see the code below

        <script>

        document.addEventListener("DOMContentLoaded", function(event) {
            var gg1 = new JustGage({
                id: "gg1",
                formatNumber: true,
                counter: true
            });
        });

    </script>

How can i write the code so that when i slide the slider to a value say 2 for example that the value will be passed to the speedometer?

Oeps that was my fault. Changed it ;)

Puya Sarmidani
– Puya Sarmidani

2015-09-23 08:41:05 +00:00
Commented Sep 23, 2015 at 8:41 — Puya Sarmidani
– Puya Sarmidani, Commented Sep 23, 2015 at 8:41

vijayP · Accepted Answer · 2015-09-23 09:00:36Z

You can look at following code. May be that will help you a bit:

Please take a look at change: function( event, ui ) event handler added for slider. It gets the newer value from slider and refreshes the JustGage by calling gg1.refresh(newValue);

<script type="text/javascript">
    $(function(){

       var gg1 = new JustGage({
            id: "gg1",
            formatNumber: true,
            counter: true
        });

        $(".cloudslider-handle").slider({
            range:"min",
            value:1,
            min:1,
            max:10,
            slide:function(event,ui){
                $(".a,.b,.c,.d").width(ui.value * 10+"%");
            },

            change: function( event, ui ) {
                var newValue = ui.value * 10;
                gg1.refresh(newValue);
            }
        });
        $(".ui-slider-handle").text("<>");
        $(".a,.b,.c,.d").width(10+"%");

    });

</script>

Collectives™ on Stack Overflow

One function interact with another javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related