jQuery Simple Slider not setting the values for both text boxes -
i following tutorial jquery simple slider examples
my index.html goes under
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/simple-slider.js"></script> <link href="css/simple-slider.css" rel="stylesheet" type="text/css" /> <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>home loan emi , eligibility calculator</h1> <table border="1"> <tr> <td>gross monthly income</td> <td><input type="text" data-slider="true" data-slider-range="15000,2000000" data-slider-step="1000"> </td> <td><input type="text" id="txtgmi"></td> </tr> <tr> <td>total current emis</td> <td><input type="text" data-slider="true" data-slider-range="0,2000000" data-slider-step="1000"> </td> <td><input type="text" id="txttcemi"> </tr> </table> <script> $("[data-slider]") .bind("slider:ready slider:changed", function (event, data) { $('#txtgmi').val(data.value); $('#txttcemi').val(data.value); }); </script> </body> </html>
the problem that, (i know there wrong in code) if change value of gross monthly income slider, textbox values both total current emis , gross monthly income getting updated , vice versa.
how can set textbox values corresponding particular slider.
simplest solution add id inputs
, bind event separately
html, have added slider1
, slider2
ids of slider
<table border="1"> <tr> <td>gross monthly income</td> <td><input id='slider1' type="text" data-slider="true" data-slider-range="15000,2000000" data-slider-step="1000"> </td> <td><input type="text" id="txtgmi"></td> </tr> <tr> <td>total current emis</td> <td><input id='slider2' type="text" data-slider="true" data-slider-range="0,2000000" data-slider-step="1000"> </td> <td><input type="text" id="txttcemi"> </tr> </table>
script
$("#slider1") .bind("slider:ready slider:changed", function (event, data) { var xx = "rs. " + converttoinr(data.value); $('#txtgmi').val(xx); }); $("#slider2") .bind("slider:ready slider:changed", function (event, data) { var xx = "rs. " + converttoinr(data.value); $('#txttcemi').val(xx); });
Comments
Post a Comment