2

私はこれをコーディングしようとしています:

https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG

いくつかの調査の後、http://loopj.com/jquery-simple-slider/を見つけました。これは素晴らしいスタートのように思えました。

これまでのところ、私は持っています:

<div class="control-group">
 <label class="control-label">Label 1</label>
  <div class="controls">    
  <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume">  
  </div>
 </div>

これはスライダーでは問題なく機能しますが、スライダーの横に数値ステッパーを配置しようとしています。したがって：

<input type="number" class="input-mini" value="60">

数値ステッパーをスライダーの隣にうまく配置しようといじっていましたが、飛んでいませinput-appendん。スライダーの横ではなく下に表示help-inlineされるフィールドのバリエーションを取得し続けます。<input type="number">

数値入力フィールドをスライダーの右側に移動するにはどうすればよいですか?

4

1 に答える 1

2

次の CSS (slidernumberは入力フィールドに割り当てられたクラス):

.slidernumber
{
    float: left;
}
.slider-volume {
    margin-top: 5px;
    float: left;
}

2 つのウィジェットは、次の HTML を使用して並べて表示されます。

<div class="control-group">
  <label class="control-label">Label 1</label>
  <div class="controls smallgroup">    
      <input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"/>  
      <input type="number" class="input-mini slidernumber" value="60"/>
  </div>
</div>

ここでフィドル。

于 2013-05-22T08:13:29.210 に答える