Displaying current value of slider inside a form

If you have questions or if you want to share your opinion about Aware IM post your message on this forum
Post Reply
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Displaying current value of slider inside a form

Post by joben »

When using the slider widget for a number attribute, all the labels are displayed below the slider like this:
Skärmbild 2021-04-14 092424.png
Skärmbild 2021-04-14 092424.png (6.92 KiB) Viewed 2324 times

I would prefer if the current value was always displayed to the right of the slider, like this:
Skärmbild 2021-04-14 092603.png
Skärmbild 2021-04-14 092603.png (5.86 KiB) Viewed 2324 times
Note: I removed the numbers for each tick with this CSS code:

Code: Select all

.k-tick .k-label{display:none;}
Displaying the saved value of the slider inside a form is farily simple using the HTML field feature, like <<BO.SliderAttributeName>>
However, I want to see the currently picked value, but I can't get it to work. I don't want to have to manually save the form to see the value update.
Is there a simple way to do this, or do I have to involve jquery?
I have tried to fetch the value with this code as a render script:
var slider = $("#slider").data("kendoSlider");
var sliderValue = slider.value();
console.log(sliderValue);
It works fine for logging the saved value to the console, but not the current value.
It seems like the current value is actually stored in a HTML attribute called aria-valuenow.

Am I missing something obvious here?
Regards, Joakim

Image
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Displaying current value of slider inside a form

Post by joben »

Current progress, hoping it might be useful for someone else:

Code: Select all

$(document).on ('mousedown mouseup', function onMouseDown() {
var slider = $("#backup_w .k-draghandle").attr('aria-valuenow');
console.log(slider);
$("#backupValue").html(slider);
});
This is placed as a render script of the form.
This works as a proof of concept.

Some explanations:

#backup_w
The ID that I have given the attribute is #backup, AwareIM only uses this ID on the input element. The actual element we want to read from is called #backup_w, (_w is added by AwareIM).

#backupValue
Is the ID of a DIV I added inside a HTML field in the form, like this:

Code: Select all

<div id="backupValue"></div>
As I said, this is a proof of concept and the code is far from perfect.
Regards, Joakim

Image
joben
Posts: 221
Joined: Wed Nov 06, 2019 9:49 pm
Location: Sweden
Contact:

Re: Displaying current value of slider inside a form

Post by joben »

This is a functional prototype of what I wanted to achieve:
Skärmbild 2021-04-16 081229.png
Skärmbild 2021-04-16 081229.png (35.33 KiB) Viewed 2290 times
Here is some code for one of the sliders:

Code: Select all

//onload
$(function(){
var sliderBackup = $("#backup_w .k-draghandle").attr('aria-valuenow');
$("#backupValue").html(sliderBackup+ ' GB');
});

//interaction
$(document).on ('mousedown mouseup', function onMouseDown() {
var sliderBackup = $("#backup_w .k-draghandle").attr('aria-valuenow');
$("#backupValue").html(sliderBackup+' GB');
});
Hope it will become useful for anyone else who isn't pleased with the original kendo slider.
Regards, Joakim

Image
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Displaying current value of slider inside a form

Post by Jaymer »

very nice, thx
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
Post Reply