1

スライダー付きのd3チャートに取り組んでいます。スライダーの長さを長くしたい。

<div id="content">
<br>
<!--<label class ="left" id="lblValue" text-align="left">&nbsp;&nbsp; Values: </label>-->
<br>
 <label for="RAG" text-align="center">&nbsp;&nbsp; January  -     December </label>
    <br>
<input type="range" name="dataset" value="RAG" in="1" max="12" step="1"  onchange="getData" style="margin=0" width="100px"/>
<br>
                <span class="tick" style="display:inline-block;width: 4px;text-align:left;margin-right:3px; margin-top=3px;">|<br/>1</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br/>2</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />3</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />4</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px;">|<br />5</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px">|<br />6</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;margin-top=3px">|<br />7</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />8</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />9</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />10</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />11</span>
                <span class="tick" style="display:inline-block;width: 4px;text-align:center;margin-right: 3px;">|<br />12</span>

</div>

このためのフィドルを作成しました： http://jsfiddle.net/ThomsonKrish/KZGd5/1/

また、スライダーのすぐ下に目盛りが表示されるように、目盛りを少し上に揃えることができれば素晴らしいと思います。

4

1 に答える 1

1

幅

使用する代わりにwidth=""、style プロパティを使用してスライダーの幅を決定します。

例えば：

<input type="range" name="dataset" value="RAG" in="1" max="12" step="1"  onchange="getData" style="margin: 0; width: 200px;"/>

目盛りの位置

目盛りの位置を変更するには、 CSS を介しmargin-top: -x;てクラスにプロパティを適用できます。.tick

于 2013-08-01T13:48:58.170 に答える