Add range sliders

ERPNext Feature Requests
1

Hello community I was looking for this feature before and now I want to share it with you.
you can add range sliders using this method.
scrnli_9_12_2023_12-28-32 PM

1- create html field with this code :
set min and max

<h4>Size</h4>
<div class="range-slider">
    <input id="input-range" max="120" min="1" step="1" style="width: 200px;" type="range" value="100">
</div> 
<div id="size">0</div>

2- add hidden int field in my case called ‘value’.
3- write this script to stock value when it’s changed.

frappe.ui.form.on('test Slider', {
	refresh: function(frm) {
		//set slider initial value
		document.getElementById("size").innerHTML=frm.doc.value.toString();
        var slider = document.getElementById("input-range");
		slider.value=frm.doc.value;
        slider.oninput = function() {
		document.getElementById("size").innerHTML=this.value.toString();
		frm.set_value("value",this.value)
        }
 }
})

and voila you can use range slider in erpnext and it looks great .

12 Likes