# aardio 范例: plus 控件 - 实现滑尺控件



```aardio
//用 plus 控件创建滑尺控件
import win.ui;
/*DSG{{*/
var winform = win.form(text="plus 控件 - 实现滑尺控件";right=757;bottom=467;bgcolor=0xF5F5F5)
winform.add(
trackbar={cls="plus";left=225;top=266;right=667;bottom=281;bgcolor=0xD9AB23;border={radius=-1};foreRight=15;forecolor=0x1C77FF;paddingBottom=5;paddingTop=5;z=1}
)
/*}}*/

//创建滑尺控件教程: https://www.aardio.com/zh-cn/docs/library-guide/std/win/ui/ctrl/plus.html#trackbar

//设置滑尺范围,切换到滑尺模式，默认自动配置滑块滑道大小，随机选择预设配色方案
winform.trackbar.setTrackbarRange(1,100);

//使用 progressPos 属性获取或修改滑块当前位置
winform.trackbar.progressPos = 1;

//设置外观
winform.trackbar.skin({
	background={
		default=0xFF23ABD9;
	};
	foreground={
		default=0xFFFF771C;
		hover=0xFFFF6600;
	};
	color={
		default=0xFFFF5C00;
		hover=0xFFFF6600;
	}
})

//可选用下面的代码添加提示控件，不需要可删除
import win.ui.tooltip;
var tooltipCtrl = win.ui.tooltip.tracking(winform);
var toolinfo = tooltipCtrl.addTrackingTool(winform.trackbar);

//鼠标放开关闭提示
winform.trackbar.onMouseUp = function(wParam,lParam){
	toolinfo.trackPopup(false);
}

//鼠标按下拖动时在提示控件中显示滑块当前位置
winform.trackbar.onPosChanged = function( pos,thumbTrack ){
	if(thumbTrack){  
		var x,_ = win.getMessagePos();
		var _,y,cx,cy = winform.trackbar.getPos(true)
		
		/*
		注意刻度最小单位总是 1,
		如果要改为其他单位,只要修改显示数值就可以,
		例如下面显示的 pos 修除以 10,对于用户来说就实现了最小单位 0.1 相同的效果。
		*/
		toolinfo.setText(pos / 10).trackPopup(true,x,y+cy); 
	}
}

winform.show(); 
win.loopMessage();
```