jQuery Knob format causing scroll issue

Question

I'm using the jQuery Knob plugin but need the displayed value to be in pound sterling. Ideally this will look like £123456. However, when I use the 'format' hook to add the £ sign it no longer allows me to set the value by scrolling the mousewheel or even by typing it in. Here's my code...

$(".dial-step1").knob(
{
   'format': function( value ){
       if(value == undefined || isNaN(value)) {
         value = 0; 
         return '£' + value;
       }
       else {
         return '£' + value;
       }
    }
}
);

It works if I change the position of the £ sign to be after the value - return value + '£'; - but I really need it before. Any idea why this would be breaking the scroll and keyboard input functionality?

I know there are a bunch of similar questions to this but all of them seem to be for adding a unit to the end of the value...

A cool workaround is to do it in CSS : `.dial-step1:before{ content : '£' }` — Jeremy Thille, May 07 '15 at 13:22
.dial-step1 is an input (should have mentioned that) so unfortunately that won't work — son_of_a_prophet, May 07 '15 at 13:50

score 0 · Accepted Answer · answered May 07 '15 at 13:50

Simply use the corresponding parse option to define your value parsing method:

$(".dial-step1").knob({
    format: function( value ){
        if (value == undefined || isNaN(value)) {
            value = 0; 
        }
        return '£' + value;
    },
    parse: function( value ){
        var v = value.toString();

        if (v.substring(0, 1) == '£') { 
            v = v.substring(1);
        }

        return parseFloat(v);
    }
});

Full example: JSFiddle

That's smashing. Thanks very much! – son_of_a_prophet May 07 '15 at 14:06 — son_of_a_prophet, May 07 '15 at 14:06

jQuery Knob format causing scroll issue

1 Answers1