JS Slider Display value, help needed

Comments

• Huyen York

  October 29, 2019 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> 

  0
• Dave 💎

  October 29, 2019 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
  
  Thx!

  0
• Huyen York

  October 29, 2019 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!

  0
• Dave 💎

  October 29, 2019 edited October 30, 2019

  Huyen, once again you came through !! 
  
  Ty for your amazing help as usual!
  
  You should be promoted to Super Skuid!!
  
  
  
  
  

  1