Non Linear Slider

This example shows how to create a slider with a non-linear scale.

示例：

代码：

					
<div style="padding:2px">
<input class="easyui-slider" style="width:400px" data-options="
			showTip:true,
			rule: [0,'PI/4','PI/2'],
			min:0,
			max:300,
			tipFormatter:function(value){
				return (value/300.0).toFixed(4);
			},
			converter:{
				toPosition:function(value,size){
					var opts = $(this).slider('options');
					return Math.asin(value/opts.max)/(Math.PI)*2*size;
				},
				toValue:function(pos,size){
					var opts = $(this).slider('options');
					return Math.sin(pos/size*Math.PI/2)*opts.max;
				}
			},
			onChange:function(v){
				var opts = $(this).slider('options');
				var pos = opts.converter.toPosition.call(this, v, opts.width);
				var p = $('<div class=point></div>').appendTo('#cc');
				p.css('top', v);
				p.css(opts.reversed?'right':'left', pos);
			}
			">
</div>
<div style="margin-bottom:30px"></div>
<div id="cc" class="easyui-panel" style="position:relative;width:404px;height:304px;">
</div>
	
<style scoped="scoped">
	.point{
		position:absolute;
		width:2px;
		height:2px;
		font-size:0;
		background:red;
	}
</style>