Displaying current value of slider inside a form

joben

When using the slider widget for a number attribute, all the labels are displayed below the slider like this:

[attachment=1]Skärmbild 2021-04-14 092424.png[/attachment]

I would prefer if the current value was always displayed to the right of the slider, like this:

[attachment=0]Skärmbild 2021-04-14 092603.png[/attachment]

Note: I removed the numbers for each tick with this CSS code:

.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?

Skärmbild 2021-04-14 092424.png

Skärmbild 2021-04-14 092603.png

joben

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

$(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:

<div id="backupValue"></div>

As I said, this is a proof of concept and the code is far from perfect.

joben

This is a functional prototype of what I wanted to achieve:

Skärmbild 2021-04-16 081229.png

Here is some code for one of the sliders:

//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.

Jaymer

very nice, thx