JS Slider Display value, help needed

DaveDave 💎
edited October 30, 2019 in Questions
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 = $('<div class="nx-fieldtext">') .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 = $('<div>').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 = $('<div>').append(amt,slider); field.element.append(sliderContainer); }

Comments

  • edited October 29, 2019
    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 = $('<div>').append(amt,slider); 
    new line:
    var sliderContainer = $('<div>').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
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="Classic">  <models> <model id="NewModel" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only">  <fields>   <field id="number" displaytype="DOUBLE" length="255" ogdisplaytype="TEXT" precision="9" scale="3" defaultvaluetype="fieldvalue" defaultValue="1"/>  </fields>  <actions/> </model> </models>  <components> <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="NewModel" uniqueid="sk-P1b-663" mode="edit">  <columns>   <column width="100%" uniqueid="sk-P1b-659">    <sections>     <section title="Section A" uniqueid="sk-P1b-660" collapsible="no" showheader="false">      <fields>       <field uniqueid="sk-P5Y-991" id="number" readonly="true"/>       <field uniqueid="sk-P1b-664" id="number" type="CUSTOM" snippet="slider">        <label>Number</label>       </field>      </fields>     </section>    </sections>   </column>  </columns> </basicfieldeditor> </components>  <resources>   <labels/>   <javascript> <jsitem location="inlinesnippet" name="slider" cachelocation="false">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); }</jsitem> </javascript>   <css/>   <actionsequences uniqueid="sk-P1Y-600"/>  </resources>  <styles>   <styleitem type="background" bgtype="none"/>  </styles> </skuidpage> 
  • DaveDave 💎
    edited October 29, 2019
    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 :D

    Thx!
  • edited October 29, 2019
    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!
  • DaveDave 💎
    edited October 30, 2019
    Huyen, once again you came through !! 

    Ty for your amazing help as usual!

    You should be promoted to Super Skuid!!




Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!