Print Page - Slider : extending to non linear scale

Title: Slider : extending to non linear scale
Post by: delta2 on March 06, 2014, 09:53:32 AM

I need to configure the slider to use a non linear scale with easing at the start.

I digged into the slider part of the minified code and added 2 lines after 12341...

Code:

12341 opts.value=_933;
-----  var slider_ease_in_factor = 0.5
-----  opts.value = Math.round(Math.pow(opts.value/opts.max,slider_ease_in_factor)*opts.value);

... which does what I want to the ToolTip but I can't work out how to get it saved to the input value so that it gets returned with the form.

Anyway I'm sure it should be possible by extending the slider object and not digging into the sourcecode.

Anyone got any suggestions. Thanks. Stu.

Title: Re: Slider : extending to non linear scale
Post by: stworthy on March 06, 2014, 08:31:14 PM

Please try to download the updated slider plugin from http://www.jeasyui.com/easyui/plugins/jquery.slider.js and include it to the page. The new slider plugin has 'converter' option that allows you determine how to convert a value to the slider position or the slider position to the value.

Code:

<input id="ss" class="easyui-slider" style="width:300px" 
		data-options="
			showTip:true,
			max:40000,
			converter:{
				toPosition:function(value, size){
					var opts = $(this).slider('options');
					return (value-opts.min)/(opts.max-opts.min)*size;
				},
				toValue:function(pos, size){
					var opts = $(this).slider('options');
					return opts.min + (opts.max-opts.min)*(pos/size);
				}
			}
		">

Title: Re: Slider : extending to non linear scale
Post by: delta2 on March 07, 2014, 01:22:20 AM

Thanks. Very elegant solution. It's working perfectly for me. So to get my slider "easing in" i adjusted the position by a factor of ^ 2 and the value by a factor of ^ 0.5 as follows:

<input name="flowrate" class="easyui-slider" value="12" style="width:200px"
      data-options="
   showTip:true,
min:0,
max:1600,
rule:[0,'|',100,'|',400,'|',900,'|',1600],
converter:{
toPosition:function(value, size){
var opts = $(this).slider('options');
//return (value-opts.min)/(opts.max-opts.min)*size;
return Math.pow((value-opts.min)/(opts.max-opts.min),0.5)*size;
},
toValue:function(pos, size){
var opts = $(this).slider('options');
//return opts.min + (opts.max-opts.min)*(pos/size);
return opts.min + (opts.max-opts.min)*Math.pow((pos/size),2);
}
}"
            >

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: delta2 on March 06, 2014, 09:53:32 AM