Add display of value to slider example.

  • 1
  • Question
  • Updated 9 months ago
  • Answered
i'm using the slider example and it works great

now the client wants to also see the numeric value as the slider slides

the jquery examples show this.... but that means adding a div and a control to display the number... i don't know how to add those to the skuid page so the javascript can update them

can you point me the way?
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Ken, here is a modified version of the Integer slider field renderer that shows the Integer value as well:



var field = arguments[0],
value = arguments[1],
$ = skuid.$;

if (field.mode == 'read') {
skuid.ui.fieldRenderers.INTEGER.read(field,value);
} else if (field.mode == 'edit') {

var amt = $('<div class="nx-fieldtext">')
.text(value || '0');

// 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 || 0,
min: 0,
max: 10,
step: 1,
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(ui.value);
}
});
var sliderContainer = $('<div>').append(amt,slider);
field.element.append(sliderContainer);
}
Photo of Jason Spencer

Jason Spencer

  • 62 Points
Very impressive stuff guys.  Skuid makes me look like a programming prodigy to the rest of my company.  Quick thought--I always thought it would be really impressive to have a "tracker" like Domino's Pizza has for a quick visual as to where we are in the process for each account.  I am thinking this slider could be modified to do that, or am I off base here?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There are many ways you could accomplish this.  I'm reminded of the way Salesforce uses opportunity stage to populate a percentage field.  That percentage field could then be used to drive the slider positioning.  A similar stragety could be used on some Account Status field in your situation.  Use a formula field to convert the status values to a percentage.   Some additional javascript coding would need to be done to get the lables for the slider to be the status fields, and even update the status fields based on changes to the slider.  But I'm sure its possible. 
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Should this code still work? Trying to use in a popup and it is not rendering a slider. 
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Anyone?
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Hey Kaede!

With our newest release (Banzai), we actually removed all theme specific jQueryUI styling from all of our themes, except classic. The jQueryUI base css is still there, just anything associated with colors, borders, backgrounds, etc is now gone. What is most likely happening for you is that the snippet is working, but you just can't see the slider because it's invisible, which is definitely not ideal.

Luckily, there's two easy solutions.
1. Use our classic theme. This probably isn't ideal because we have so many cool themes out there now, and you don't want to be locked in to just one specifically.
2. Add this handy bit of CSS I just made to your skuid page. (How do I do this?)
.ui-slider-horizontal .ui-slider-handle {
border: 1px solid #ccc;
background: #eee;
}
.ui-slider-horizontal {
border: 1px solid #ccc;
background: #f9f9f9;
}
This will style the slider in a fairly conservative manner that will look appropriate in just about any context. Also feel free to swap out those colors if you like.
Photo of Kaede Holland

Kaede Holland

  • 2,744 Points 2k badge 2x thumb
Skuid makes me feel like it's always christmas. 

Thank you so much!
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Glad we could help!
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you very much this will be extremely useful.

By any chance, has any one found a way to display the value with a currency formatting before save? ($ and comma to separate thousands...)
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Hi Dave,

Here is a modified version that uses Skuid's built-in Currency renderer to display the number with currency formatting. Here I've set a max for the slider to 100,000 but you can easily adjust this to a higher value:

var field = arguments[0],   
    value = arguments[1],
    $ = skuid.$;
if (field.mode == 'read') {
    skuid.ui.fieldRenderers.INTEGER.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('<div class="nx-fieldtext">')
        .text(skuid.ui.renderers.CURRENCY.read({ value: value || '0' }));
    // 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 || 0,
        min: 0,
        max: 100000,
        step: 1,
        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.CURRENCY.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}


Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Wow, that was fast and works!!

Thank you very much Zach  :)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hello,

By any chance, would anyone knows how I can make this slider work to display Decimals?

var params = arguments[0],
    $ = skuid.$;
var field = arguments[0],  
    value = arguments[1],
    $ = skuid.$;
if (field.mode == 'read') {
    skuid.ui.fieldRenderers.INTEGER.read(field,value);
} else if (field.mode == 'edit') {
    var amt = $('<div class="nx-fieldtext">')
        .text(skuid.ui.renderers.INTEGER.read({ value: value || '0' }));
    // 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 || 0,
        min: 1.001,
        max: 1.999,
        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.INTEGER.read({ value: ui.value }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}

All works except visually i do not see the decimals only the number 1 and 2. I would like to be bale to see up to 3 decimals if possible

Thank you,
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Try changing "skuid.ui.renderers.INTEGER" to "skuid.ui.renderers.DOUBLE"
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thx Andrew but unfortunately I had tried that before posting and still not working

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 || '0' }));
    // 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 || 0,
        min: 1.001,
        max: 1.999,
        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 }));
        }
    });
    var sliderContainer = $('<div>').append(amt,slider);
    field.element.append(sliderContainer);
}
Photo of Andrew Duensing

Andrew Duensing, Employee

  • 740 Points 500 badge 2x thumb
Aw, I see. Yeah you have to add a decimalPlaces field when using the "DOUBLE" renderer. 

amt.text(skuid.ui.renderers.DOUBLE.read({                
    value: ui.value,
    decimalPlaces: 3
}));
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you, that worked!

:)
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb
Anybody come up with a fix for this so it displays well in a tab set?  Also a mobile version?