如何创建具有5个值的表单滑块

Question

如何像截图一样创建表单滑块。

Answer 1

您可以使用jquery selecttoUIslider组件。该组件接受select表单元素并生成jquery UI Slider元素。

以下是页面中的示例。

<强>标记

 <select name="optiontype" id="idselect">
      <option value="Economy">Economy</option>
      <option value="Value">Value</option>
      <option value="Average" selected="selected">Average</option>
      <option value="Splurge a little">Splurge a little</option>
      <option value="Luxury">Luxury</option>
  </select> 

<强>的Javascript

$('#idselect').selectToUISlider();

您可以查看演示页here

并从here

下载代码

Answer 2

您可以尝试HTML5输入标记tyape = range

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range

<input type="range" name="points" min="1" max="10">

你也可以使用一些css修改框，:)）