スライダー

<slider>です。コンポーネントの色んな値を変えることができます。

よく使う属性：
   value ・・・・デフォルト値
   minvalue・・・最小値(デフォルト0)
   maxvalue・・・最大値(デフォルト100)

サンプルでは適当に色々設定してみました。さて、実用的なのはどれでしょう？

• 位置
• 色
• 間隔
• フォントサイズ
• 透明度
• サイズ

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout spacing="15"/>
  <slider id="sl" x="10" yoffset="-17" value="50"/>
  <view x="${sl.value*2}" width="50" height="50" bgcolor="purple"/>
  <view x="${200-sl.value*2}" width="50" height="50" bgcolor="olive"/>
  <view width="200" height="50" bgcolor="${sl.value*2.55}" />
  <hbox spacing="${sl.value/2}">
    <view width="50" height="${this.width}" bgcolor="lime"/>
    <view width="50" height="${this.width}" bgcolor="lime"/>
    <view width="50" height="${this.width}" bgcolor="lime"/>
  </hbox>
  <text fontsize="${sl.value/3}" text="フォントサイズ" />
  <view opacity="${sl.value*0.01}" width="50" height="50" bgcolor="black"/>
  <hbox spacing="5">
    <view width="${sl.value}" height="${this.width}" bgcolor="red"/>
    <view width="${sl.value}" height="${this.width}" bgcolor="red"/>
    <view width="${sl.value}" height="${this.width}" bgcolor="red"/>
  </hbox>
</canvas>