Slider : extending to non linear scale

[delta2]

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.

[stworthy]

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);
				}
			}
		">

[delta2]

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);
                                }
                            }"
            >