Problems with jQuery slider and input

Question

I'm trying to make my first jQuery slider, and I have this code:

$("#str").keyup(function(event) {
var data=$("#str").val();
if (data.length>0) 
{
 var intdata=SpecialRound(parseFloat(data));
 if (intdata>=0 && intdata<=20) 
 {
  $("#str_slider").slider("option", "value", data);
 }
 else
 {
  if (intdata<0) 
  {
   $("#str").val("0");
   $("#str_slider").slider("option", "value", "0");
  }
  if (intdata>20) 
  {
   $("#str").val("20");
   $("#str_slider").slider("option", "value", "20");
  }
 }
}
});

Although, I have a problem. When I write something in the input with the ID #str, nothing happens. Though, the sliders works perfect. You can test att http://vpopulus.tk/damage

EDIT: I basicly want to make so when you edit the input, the slider is changed too.

Oh, that is just a function I use to round to two decimals. – SnackerSWE Sep 06 '11 at 15:47 — SnackerSWE, Sep 06 '11 at 15:47

Niko · Accepted Answer · 2011-09-06T15:54:43.887

3

I think your selector $('#str') is the problem, because your input has no ID #str but just a name attribute with value "str". The correct selector would be $('input[name="str"]')

EDIT: The actual problem is this SpecialRound function because you're using a not-existing function "round()" there. Use this instead:

//Special round
function SpecialRound(f) {
   return Math.round(f*100) / 100;
}

edited Sep 06 '11 at 15:54

answered Sep 06 '11 at 15:27

Niko

26,516
9
93
110

Ah, sorry. I mixed some old code with the new one. But you can see at about row 232 that I have ID. – SnackerSWE Sep 06 '11 at 15:30
Ok, didn't see the second input, sorry. Your specialRound() function is the problem, you're using `round()` there, but it is actually `Math.round()`. – Niko Sep 06 '11 at 15:41
1

Ah, you didn't put your code (that one binding the event listener to the keyup event) into your onReady event listener, so that it would be executed when the DOM is ready for that kind of action. Now jQuery tries to bind the event listener to an input that isn't yet present the time your code is executed. Understand what I mean? – Niko Sep 06 '11 at 17:17

score 1 · Answer 2 · answered Sep 06 '11 at 15:28

1

if i were you i'd use the change event instead of keyup

for example:

$( "#str" ).change(function() {
    var val = this.val(); // you can do your rounding here then...
    $("#str_slider").slider( "value", val );
});

answered Sep 06 '11 at 15:28

Sander

13,301
15
72
97

score 1 · Answer 3 · answered Sep 06 '11 at 15:57

1

By looking at your testpage, you have at line 54 in SpecialRound

var r=round(f*100)/100;

that should be

var r=Math.round(f*100)/100;

answered Sep 06 '11 at 15:57

Manuel Leuenberger

2,327
3
21
27

Problems with jQuery slider and input

3 Answers3