简介：
滑块功能在各种应用程序和网站中广泛应用，例如音量控制器中的音量滑块、图像编辑器中的亮度滑块、视频播放器中的进度条滑块等。滑块功能简单直观，让用户可以快速调整数值或设置，提高了用户体验和交互性。今天我们拿Material Design做一个实例。
???
???????????????
- ??(Tag)?????????????????????
- ??(Track)?????????????????????
- ????(Highlight Track)???????????????
- ????(Thumb)???????????????????
- ???(Current Value)??????????????????????????
- ???(Max Value)???????????????
- ???(Max Value)???????????????
???????????????
- ??????
- ?????(Decrease Value)????????
- ?????(Increase Value)????????
?????????????????????
- ????
- ?????????
- ???????????
- ??????
- ????
- ?????
- ????????
- ???????
?????????????ElementUI??????
???????
????????????
- ????(Thumb)??????20px???20px???2px?????#409EFF?
- ????(Highlight Track)??????300px???6px???#409EFF???3px?
- ??(Track)??????300px???6px???#E4E7ED???3px?
????????????????????????????????????
???????
???????????????????????????
- ??????(Thumb Container)??????
- ??????(Highlight Track Container)???150px???6px???3px?
- ????(Track Container)???6px???3px?
?????????
???????????(Thumb)????????x??????????????????????????Thumb???????????????????????????????????
??????????????Track???????????????????????
??????????
- ???
- ??
- ?????
- ?????????
- ???
- ?? >= [[Track.Left – This.Width/2]]
- ?? <=[[Track.Right + This.Width/2]]
- ??
- ???
- ????
- ???(Highlight Track Container)
- ???[[This.Left + This.Width/2 – Track.Left]]
- ????
???????“????????(Highlight Track)????????????”????????????????(Highlight Track)????????????????????????????????(Highlight Track)?????????????(???????)???????????????????
???????????
?????????????????????????????????(Track Container)??????
?????????(Highlight Track Container)???????
???????
?????????????????????????????????????????????????????????????
???
??????????????????????????????
如果觉得我的教程做的不错呢，欢迎关注、收藏、转发、捐赠，谢谢。
原文链接：使用Axure制作Slider滑块功能(一)-基础滑块
转载请注明：最InのAxure » 使用Axure制作Slider滑块功能(一)-基础滑块