kit

Slider

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On List

Slider

Opacity
%
60% From 0 to 100%.
Price
£
£
£50.00 – £250.00 From £0 to £500.
Cannot be changed
Opacity
%
60% Only the owner can change this. From 0 to 100%.
Price
£
£
£50.00 – £250.00 Only the owner can change this. From £0 to £500.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="slider-opacity">
  <fieldset>
    <legend id="slider-opacity-label">Opacity</legend>
    <div data-kit-role="slider" data-kit-slider='{"firstDay":"mon","fraction":false,"locale":"en-GB","max":100,"min":0,"step":10,"unit":"percent"}' id="slider-opacity-control">
  <div data-kit-region="track" id="slider-opacity-control-track">
    <div data-kit-region="range" style="--kit-slider-to: 0.6"></div>
    <span data-kit-region="tick" style="--kit-slider-at: 0"></span><span data-kit-region="tick" style="--kit-slider-at: 0.1"></span><span data-kit-region="tick" style="--kit-slider-at: 0.2"></span><span data-kit-region="tick" style="--kit-slider-at: 0.3"></span><span data-kit-region="tick" style="--kit-slider-at: 0.4"></span><span data-kit-region="tick" style="--kit-slider-at: 0.5"></span><span data-kit-region="tick" style="--kit-slider-at: 0.6"></span><span data-kit-region="tick" style="--kit-slider-at: 0.7"></span><span data-kit-region="tick" style="--kit-slider-at: 0.8"></span><span data-kit-region="tick" style="--kit-slider-at: 0.9"></span><span data-kit-region="tick" style="--kit-slider-at: 1"></span>
    <div aria-label="Opacity" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" aria-valuetext="60%" data-kit-region="thumb" id="slider-opacity-control-thumb-0" role="slider" style="--kit-slider-at: 0.6" tabindex="0"></div>
  </div>
  <div data-kit-region="fields">
    <div data-kit-region="field"><div data-kit-number='{"fraction":false,"locale":"en-GB","max":100,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-opacity-control-field-0-number-field">
  <input aria-describedby="slider-opacity-help" aria-label="Opacity" aria-valuemax="100" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-opacity-control-field-0" inputmode="numeric" role="spinbutton" spellcheck="false" type="text" value="60">
  <span data-kit-region="unit">%</span>
  <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-opacity-control-field-0-decrease" aria-label="Decrease" aria-controls="slider-opacity-control-field-0" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
  <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-opacity-control-field-0-increase" aria-label="Increase" aria-controls="slider-opacity-control-field-0" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
  <input type="hidden" name="opacity" value="60">
</div></div>
  </div>
</div>
  </fieldset>
  <output for="slider-opacity-control">60%</output>
  <span data-kit-region="help" id="slider-opacity-help">From 0 to 100%.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="slider-price">
  <fieldset>
    <legend id="slider-price-label">Price</legend>
    <div data-kit-role="slider" data-kit-slider='{"currency":"GBP","firstDay":"mon","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' id="slider-price-control">
  <div data-kit-region="track" id="slider-price-control-track">
    <div data-kit-region="range" style="--kit-slider-from: 0.1; --kit-slider-to: 0.5"></div>
    <div aria-label="Lowest price" aria-orientation="horizontal" aria-valuemax="250" aria-valuemin="0" aria-valuenow="50" aria-valuetext="£50.00" data-kit-region="thumb" id="slider-price-control-thumb-0" role="slider" style="--kit-slider-at: 0.1" tabindex="0"></div><div aria-label="Highest price" aria-orientation="horizontal" aria-valuemax="500" aria-valuemin="50" aria-valuenow="250" aria-valuetext="£250.00" data-kit-region="thumb" id="slider-price-control-thumb-1" role="slider" style="--kit-slider-at: 0.5" tabindex="0"></div>
  </div>
  <div data-kit-region="fields">
    <div data-kit-region="field"><label for="slider-price-control-field-0">Lowest price</label><div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-price-control-field-0-number-field">
  <span data-kit-region="unit">£</span>
  <input aria-describedby="slider-price-help" aria-valuemax="500" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-price-control-field-0" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="50.00">
  <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-price-control-field-0-decrease" aria-label="Decrease" aria-controls="slider-price-control-field-0" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
  <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-price-control-field-0-increase" aria-label="Increase" aria-controls="slider-price-control-field-0" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
  <input type="hidden" name="price[lowest]" value="50">
</div></div><div data-kit-region="field"><label for="slider-price-control-field-1">Highest price</label><div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-price-control-field-1-number-field">
  <span data-kit-region="unit">£</span>
  <input aria-describedby="slider-price-help" aria-valuemax="500" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-price-control-field-1" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="250.00">
  <button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-price-control-field-1-decrease" aria-label="Decrease" aria-controls="slider-price-control-field-1" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
  <button type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-price-control-field-1-increase" aria-label="Increase" aria-controls="slider-price-control-field-1" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
  <input type="hidden" name="price[highest]" value="250">
</div></div>
  </div>
</div>
  </fieldset>
  <output for="slider-price-control">£50.00 – £250.00</output>
  <span data-kit-region="help" id="slider-price-help">From £0 to £500.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="slider-opacity-disabled">
<fieldset>
  <legend id="slider-opacity-disabled-label">Opacity</legend>
  <div data-kit-role="slider" data-kit-slider='{"firstDay":"mon","fraction":false,"locale":"en-GB","max":100,"min":0,"step":10,"unit":"percent"}' id="slider-opacity-disabled-control">
<div data-kit-region="track" id="slider-opacity-disabled-control-track">
  <div data-kit-region="range" style="--kit-slider-to: 0.6"></div>
  <span data-kit-region="tick" style="--kit-slider-at: 0"></span><span data-kit-region="tick" style="--kit-slider-at: 0.1"></span><span data-kit-region="tick" style="--kit-slider-at: 0.2"></span><span data-kit-region="tick" style="--kit-slider-at: 0.3"></span><span data-kit-region="tick" style="--kit-slider-at: 0.4"></span><span data-kit-region="tick" style="--kit-slider-at: 0.5"></span><span data-kit-region="tick" style="--kit-slider-at: 0.6"></span><span data-kit-region="tick" style="--kit-slider-at: 0.7"></span><span data-kit-region="tick" style="--kit-slider-at: 0.8"></span><span data-kit-region="tick" style="--kit-slider-at: 0.9"></span><span data-kit-region="tick" style="--kit-slider-at: 1"></span>
  <div aria-label="Opacity" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" aria-valuetext="60%" data-kit-region="thumb" id="slider-opacity-disabled-control-thumb-0" role="slider" style="--kit-slider-at: 0.6" tabindex="-1" aria-disabled="true"></div>
</div>
<div data-kit-region="fields">
  <div data-kit-region="field"><div data-kit-number='{"fraction":false,"locale":"en-GB","max":100,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-opacity-disabled-control-field-0-number-field">
<input disabled aria-describedby="slider-opacity-disabled-help" aria-label="Opacity" aria-valuemax="100" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-opacity-disabled-control-field-0" inputmode="numeric" role="spinbutton" spellcheck="false" type="text" value="60">
<span data-kit-region="unit">%</span>
<button disabled type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-opacity-disabled-control-field-0-decrease" aria-label="Decrease" aria-controls="slider-opacity-disabled-control-field-0" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
<button disabled type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-opacity-disabled-control-field-0-increase" aria-label="Increase" aria-controls="slider-opacity-disabled-control-field-0" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
<input disabled type="hidden" name="opacity" value="60">
</div></div>
</div>
</div>
</fieldset>
<output for="slider-opacity-disabled-control">60%</output>
<span data-kit-region="help" id="slider-opacity-disabled-help">Only the owner can change this. From 0 to 100%.</span>
</div>

<div data-kit-role="form-group" data-kit-holds="help" id="slider-price-disabled">
<fieldset>
  <legend id="slider-price-disabled-label">Price</legend>
  <div data-kit-role="slider" data-kit-slider='{"currency":"GBP","firstDay":"mon","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' id="slider-price-disabled-control">
<div data-kit-region="track" id="slider-price-disabled-control-track">
  <div data-kit-region="range" style="--kit-slider-from: 0.1; --kit-slider-to: 0.5"></div>
  <div aria-label="Lowest price" aria-orientation="horizontal" aria-valuemax="250" aria-valuemin="0" aria-valuenow="50" aria-valuetext="£50.00" data-kit-region="thumb" id="slider-price-disabled-control-thumb-0" role="slider" style="--kit-slider-at: 0.1" tabindex="-1" aria-disabled="true"></div><div aria-label="Highest price" aria-orientation="horizontal" aria-valuemax="500" aria-valuemin="50" aria-valuenow="250" aria-valuetext="£250.00" data-kit-region="thumb" id="slider-price-disabled-control-thumb-1" role="slider" style="--kit-slider-at: 0.5" tabindex="-1" aria-disabled="true"></div>
</div>
<div data-kit-region="fields">
  <div data-kit-region="field"><label for="slider-price-disabled-control-field-0">Lowest price</label><div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-price-disabled-control-field-0-number-field">
<span data-kit-region="unit">£</span>
<input disabled aria-describedby="slider-price-disabled-help" aria-valuemax="500" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-price-disabled-control-field-0" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="50.00">
<button disabled type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-price-disabled-control-field-0-decrease" aria-label="Decrease" aria-controls="slider-price-disabled-control-field-0" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
<button disabled type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-price-disabled-control-field-0-increase" aria-label="Increase" aria-controls="slider-price-disabled-control-field-0" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
<input disabled type="hidden" name="price[lowest]" value="50">
</div></div><div data-kit-region="field"><label for="slider-price-disabled-control-field-1">Highest price</label><div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB","max":500,"min":0,"step":10}' data-kit-role="number-field" data-kit-width="short" id="slider-price-disabled-control-field-1-number-field">
<span data-kit-region="unit">£</span>
<input disabled aria-describedby="slider-price-disabled-help" aria-valuemax="500" aria-valuemin="0" autocomplete="off" autocorrect="off" id="slider-price-disabled-control-field-1" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="250.00">
<button disabled type="button" data-kit-role="icon-action" data-kit-region="decrease" id="slider-price-disabled-control-field-1-decrease" aria-label="Decrease" aria-controls="slider-price-disabled-control-field-1" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
<button disabled type="button" data-kit-role="icon-action" data-kit-region="increase" id="slider-price-disabled-control-field-1-increase" aria-label="Increase" aria-controls="slider-price-disabled-control-field-1" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
<input disabled type="hidden" name="price[highest]" value="250">
</div></div>
</div>
</div>
</fieldset>
<output for="slider-price-disabled-control">£50.00 – £250.00</output>
<span data-kit-region="help" id="slider-price-disabled-help">Only the owner can change this. From £0 to £500.</span>
</div>