Slider

Sliders are used by users to search or filter something in a particular range or at a particular value.

Range Slider

Range Sliders can be used to set a particular range for some value to filter out particular objects. Have a look at the Price Range demo below along with the code reference.

        
  <div class="slider-wrapper">
    <h3>Price Range</h3>
    <p>Use slider or enter min & max price.</p>
    <div class="slider-input">
      <div class="slider-field">
        <span>Min</span>
        <input
          type="number"
          name="input-min"
          id="input-min"
          class="input input-min"
          value="2500"
        />
      </div>
      -
      <div class="slider-field">
        <span>Max</span>
        <input
          type="number"
          name="input-max"
          id="input-max"
          class="input input-max"
          value="7500"
        />
      </div>
    </div>
    <div class="slider-range">
      <div class="progress"></div>
      <input
        type="range"
        name="range-min"
        id="range-min"
        class="range-min"
        min="0"
        max="10000"
        value="2500"
        step="100"
      />
      <input
        type="range"
        name="range-max"
        id="range-max"
        class="range-max"
        min="0"
        max="10000"
        value="7500"
        step="100"
      />
    </div>
  </div>