Add an numeric slider to Jtable

[crynos]

Hi guys, i need to add a numeric slider (0 to 90) to create/update pop-up. Can someone shows me how to do this, if there's a way ?

Slider example can be found here: http://jqueryui.com/slider/#rangemin

[kubik256]

[code] // In jQuery transform INPUT type=number to SPINNER: // ---------------------------------------------------------------------- $(document).ready(function(){ $('input[type="number"]').spinner(); }

// In jTABLE under "fields" create field like this: // ---------------------------------------------------------------------- dbitem:{ title: 'title of dbitem', input: function(data){ var db_val = (data.record)? data.record.dbitem : 0; // Zero is default value for creating new... return ''; } }, [/code]

[crynos]

@kubik256 , Thank you for your help.

I didn't understand where do i put the

// In jQuery transform INPUT type=number to SPINNER: // ---------------------------------------------------------------------- $(document).ready(function(){ $('input[type="number"]').spinner(); }

Can you help with that?

[kubik256]

$(document).ready - Specify a function to execute when the DOM is fully loaded, try to study jQuery manual there: http://api.jquery.com/ready/

My previous comment was badly broken by Github's system... jTABLE field has to be like this:

dbitem:{   title: 'title of dbitem',   input: function(data){     var db_val = (data.record)? data.record.dbitem : 0; // Zero is default value for creating new...     return '<INPUT TYPE="number" NAME="dbitem" MIN="0" MAX="90" STEP="1" VALUE="' + db_val + '">';   } },

[crynos]

I'll test it later. Thanks

[kubik256]

I have it working in my project ...with different values of MIN, MAX and STEP ;) If you are not friendly with jQUERY try to learn and read the manuals and API references at: http://api.jquery.com/

jTable is whole build on it... so if you want to understand how the jTable works you must first understand the basics of jQuery.

Have a nice coding, Best regards ;)

[crynos]

Using your code, i got this:

But not the slider that i need, so i tried this:

test:{

                      title: 'test',
                    width: '10%',
                    input: function() {
$( "#slider-range-min" ).slider({
  range: "min",
  value: 37,
  min: 1,
  max: 700,
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.value );
  }
});
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
  return '<div id="slider-range-min"></div>';
 }

                      }         

But no luck .. it doesnt shows the div with the slider.... any tips ?

Here what i need to show:

[kubik256]

You need SLIDER and not the SPINNER.. sorry for that :) Slider is not working for me neither because it uses DIV instead of INPUT :(

I'll try to find out how to achieve this... it must be possible to done it somehow via jQuery.

[kubik256]

I get it working like this...

input: function(data){   var myval = (data.record) ? data.record.cas : 0; // DEFAULT VALUE is 0   var $myelement = $('<DIV></DIV>').slider({min: 0, max: 90, step: 1, value: myval});   return $myelement; }

...and there is no need to use previous dedicated code to create a slider.

Only one little problem is, that slider's value can't be serialized standart way, because it's still only a DIV element on DOM, I don't know how to evade this :( ...maybe prepend some binded hidden input where to store the value of your slider ;)

[kubik256]

In HTML5 if you don't need to support IE9 and older, you can use INPUT TYPE="RANGE" Look here.: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range :)

[kubik256]

• positive is: value is properly sent to server
• negative: INPUT RANGE can be poorly styled, design of control depends on browser

[crynos]

Yes... i dont need to suport older browsers. I'll test it soon. Thank you for all your help.

[crynos]

The problem with Range is that i cant see the value .. i mean.. if the slider is large like 100 , its hard to pick a exact number. But its a start

[kubik256]

I'm still trying to solve the same thing, but user have to chose only from 0,5 to 24 step 0,5... so there is 48 possible steps... spinner should be the right choice for me :)

A few moths ago I have used autoNumeric plugin, which can be used for input number with many formating params ...try to look here: http://www.decorplanit.com/plugin/

Maybe u can use it... usage of this plugin is very simple. The same way like the other jQuery widgets. Only one small .js file must be included to get it work.

Good luck ;)