formstone/src/docs/range.html

Library of modular front end components.

<h4>Basic</h4>

<!-- START: FIRSTDEMO -->

<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input">
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range();</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h4>Disabled</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" disabled>
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot; disabled&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range();</code></pre>
  </div>
</div>

<h4>Custom Labels</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" data-range-options='{"labels":{"min":"Min","max":"Max"}}'>
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range({
  labels: {
    min: "Min",
    max: "Max"
  }
});</code></pre>
  </div>
</div>

<h4>No Labels</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" data-range-options='{"labels":false}'>
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range({
  labels: false
});</code></pre>
  </div>
</div>

<h4>Custom Range</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" min="25" max="75" step="5">
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot; min=&quot;25&quot; max=&quot;75&quot; step=&quot;5&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range();</code></pre>
  </div>
</div>

<h4>Fill</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" data-range-options='{"fill":true}'>
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range({
  fill: true
});</code></pre>
  </div>
</div>


<h4>Vertical</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" orient="vertical">
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot; orient=&quot;vertical&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range();</code></pre>
  </div>
</div>

<h4>No Theme</h4>
<div class="demo_container">
  <div class="demo_example">
    <form action="#" method="GET" class="form demo_form">
      <fieldset class="form_fieldset">
        <input type="range" class="form_input" data-range-options='{"theme":""}'>
      </fieldset>
    </form>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;input type=&quot;range&quot; name=&quot;range&quot;&gt;</code></pre>
    <pre><code class="language-javascript">$("input[type='range']").range({
  theme: ""
});</code></pre>
  </div>
</div>