Slider是常用控件。Adobe官方提供的控件中，fl库所带的控件不好用，便有兄弟《自制Flash Slider滚动条》。Flex库中也提供有Slider控件，但是Flex控件太重量级，动不动就是一二百K的尺寸，很多场合没法用。并且，Flex的Slider也不容易定制，比如，它的highlight track比track要低1像素，这在很多情况下是不合适的。

本文修改MinimalComps项目的Slider控件代码，提供一个小巧的Slider控件解决方案，本方案具有以下优势：

（1）小巧。不依赖于fl控件或Flex库，使用本控件不会让程序尺寸增加多少；

（2）容易定制。很容易定制 highlight track、track和thumb部分；

（3）可数据绑定。

MinimalComps项目提供了简单的Slider控件，该控件源代码为：

 

然而，MinimalComps的Slider控件的外观（http://www.minimalcomps.com/?page_id=5）很简单，见下图。

 

由于外观直接写死了，没办法换皮肤，因此，难以用于生产环境。

 

下面是我的改写版本：

 

BaseComponent类见我的其它博文：《只学一点点：我的技术学习策略 》（http://www.cnblogs.com/xiaotie/archive/2011/12/10/2283384.html）和《使用铁哥SmartFlash快速开发方案：66行代码搞定抽奖程序！》（http://www.cnblogs.com/xiaotie/archive/2011/06/15/2081386.html）。

下面演示Slider控件的使用：

 

 

在线演示：

 

从上到下，可以看到三个Slider：

第一个Slider的皮肤由三个形状组成，track是黑色矩形，highlightTrack是蓝色矩形，thumb是圆。highlightTrack和track都规定了高度，这个高度，就是显示出来的highlightTrack和track高度，如果想让highlightTrack和track变粗，改变它的高度即可。Thumb规定了长和宽，如果修改thumb的大小，改变它的长宽即可，当然，如果长宽不等，则就是椭圆而非圆形了。

第二个Slider是由三个图片组成的，以应对复杂精致的皮肤，所使用的三个图片如下：

 

使用不同的图片，便是不同的Slider外观。

第二个Slider和第一个Slider还有个不同，就是ignoreThumbSize属性为true。第一个Slider的thumb是圆形，把thumb拖到两端可以发现，thumb遮盖不住两端（如果是方形的thumb则没这个问题），因此，引入了ignoreThumbSize字段。ignoreThumbSize字段默认为false，当ignoreThumbSize为true时，以thumb的中线为定位基准，这样便可避免当thumb是圆形时移动到两端，盖不住track两端的情况。

第三个Slider的orientation设为vertical，因此，便是竖着的Slider。

Slider可供数据绑定，比如：

<gc:Label x="130" y="50" autoSize="true" text="{slider1.value}" />

通过这样简单的代码便可使slider1的值改变时，对应的Lable的文本也发生变化。

是不是既小巧、又易用又灵活呢？

本文转自xiaotie博客园博客，原文链接http://www.cnblogs.com/xiaotie/archive/2012/02/11/2346956.html如需转载请自行联系原作者

xiaotie 集异璧实验室(GEBLAB)