Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 25 Feb 2020 14:37 by ADMIN
Ghanshyam
Created on: 21 Jul 2016 12:14
Category: Slider
Type: Feature Request
3
Kendo UI range slider Max & Min value can be set dynamically(pragmatically)
We required to set the range for a slider dynamically based on the calculated values or values from Database. At the moment Kendo UI range slider do not support to set its MIN & MAX values dynamically.
1 comment
sachin
Posted on: 11 Apr 2017 06:59 
Yes i faced same problem. beacuase kendo range slider initialize only once.you can create seperate small jsp and import that jsp which contain only slider div and input.
I am changing range slider according to slider.

endKendoSliderData = $("#sliderEnd").kendoSlider({
min: 1,
max: 22,
smallStep: 1,
largeStep: 3,
value: 16,
showButtons: false,
change:function(e){
var rangeSliderVal= this.value().toString();
var CreateSliderUrl='addEndSlider.do?MaxRange='+rangeSliderVal+"&rangeminval=1"+"&rangemaxval="+rangeSliderVal+"&mode='add'";
$("#rangeEndSliderWrapper").load(CreateSliderUrl);
}
}).data("kendoSlider");


JSP File 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
 <div id="rangeKendoSlider" style="width:414px">
	<input />
    <input />
 </div>
 <script type="text/javascript">
 
 $(document).ready(function() {
 	 var d1=<%= request.getParameter("MaxRange") %>
 	 var Rangeminval=<%= request.getParameter("rangeminval") %>
 	 var Rangemaxval=<%= request.getParameter("rangemaxval") %>
 	 var mode=<%= request.getParameter("mode") %>
 	 	  	 
  	 if(d1!=null){ 	
 	  if(mode=="add"){
 	 	 	  var maskValueInit; 
   		      maskValueInit=maskValueGenerator(d1);	 
      		  reloadMaskedTextbox(maskValueInit);
 		  }

 	  $("#rangeKendoSlider").kendoRangeSlider({
    	min: 1,
        max: d1,
        smallStep: 1,
        largeStep: 3,
        selectionStart: Rangeminval,
        selectionEnd: Rangemaxval,
        tickPlacement: "both",
	});
   }
 });
Create an account Log In
View
Type
Status
Category