JS Slider Display value, help needed

Hi guys,

I use this JS to display a slider, All works well except 1 item which I cannot figure and maybe one of you can help hopefully

On line 10 this is the default value shows when I first display this field. In my case this is a UI field so the default value is null so the JS fetches the info from a field on row: Lowest_Cost_of_Funds__c

the problem is that it does not show decimals for some reason only the whole number. The moment I touch the slider the proper value will appear (line 22-29 has something added to show # of decimals I want)

How can I do the same for Line 10 to show 3 decimals, as the number it is supposed to show is example 1.149 but it only shows 1

Hope it’s clear enough


var params = arguments[0],
$ = skuid.$; var field = arguments[0], value = arguments[1], $ = skuid.$; if (field.mode == ‘read’) { skuid.ui.fieldRenderers.DOUBLE.read(field,value); } else if (field.mode == ‘edit’) { var amt = $(‘
’) .text(skuid.ui.renderers.DOUBLE.read({ value: value || field.row.Lowest_Cost_of_Funds__c})); // Render a jQuery ui slider // with step size 1 and boundary range [0,10]. // Whenever this slider is updated, // our row will be updated as well var slider = $(‘
’).slider({ value:value || field.row.Lowest_Cost_of_Funds__c, min: 1.119, max: 1.499, step: 0.001, slide: function( event, ui ) { // Update our model with the new value field.model.updateRow( field.row, field.id, ui.value, { initiatorId : field._GUID} ); amt.text(skuid.ui.renderers.DOUBLE.read({ value: ui.value, decimalPlaces: 3 })); } }); var sliderContainer = $(‘
’).append(amt,slider); field.element.append(sliderContainer); }

So the issue is just the display text above the slider. When debug the model, the value is being recorded correctly with the right decimals. So I’m not sure why it behaves that way, but if you remove amt from this line

var sliderContainer = $(‘
’).append(amt,slider); ```new line:

var sliderContainer = $('<div>')&#46;append(slider);


then you can just drop in the field again above the slider and on save it will display correctly.

Here’s my XML

                  Number            var params = arguments[0], $ = skuid.$; var field = arguments[0], value = arguments[1], $ = skuid.$; if (field.mode == ‘read’) { skuid.ui.fieldRenderers.DOUBLE.read(field,value); } else if (field.mode == ‘edit’) { var amt = $(‘&lt;div class=“nx-fieldtext”&gt;’) .text(skuid.ui.renderers.DOUBLE.read({ value: value || field.row.Lowest_Cost_of_Funds__c})); // Render a jQuery ui slider // with step size 1 and boundary range [0,10]. // Whenever this slider is updated, // our row will be updated as well var slider = $(‘&lt;div&gt;’).slider({ value:value || field.row.Lowest_Cost_of_Funds__c, min: 1.119, max: 1.499, step: 0.001, slide: function( event, ui ) { // Update our model with the new value field.model.updateRow( field.row, field.id, ui.value, { initiatorId : field._GUID} ); amt.text(skuid.ui.renderers.DOUBLE.read({ value: ui.value, decimalPlaces: 3 })); } }); var sliderContainer = $(‘&lt;div&gt;’).append(slider); field.element.append(sliderContainer); }         ```

Thank you very much, this can work in some case, but in others, it causes a visual blank space (where the field on top is now ) which does not work with my design. But still thank you very much, hopefully, I or someone will figure it out 1 day lol :smiley:

Thx!

I see, so I poked at it a bit more, and realized that you need to add decimalPlaces to line 10 of the snippet like so:

.text(skuid.ui.renderers.DOUBLE.read({ value: value || field.row.Lowest_Cost_of_Funds__c,decimalPlaces: 3})); 

You were super close!

Huyen, once again you came through !! 

Ty for your amazing help as usual!

You should be promoted to Super Skuid!!