KPC
Kevin Powell - Community•3w ago
ᴋʙ

Emulating a range slider

I am creating a highly customizable range slider with possibility multiple of multiple "thumbs" What i am trying to understand how to make it as accessable as possible. I am guessing that the input type range is as accessable as it can get, so how cam i emulate that. Are there any realistic/real negatives/cons with creating a javascript range slider in terms of accessability?
3 Replies
ᴋʙ
ᴋʙOP•3w ago
example: 
<div class="slider-container">
  <label id="volume-label">Volume</label>
  <div class="slider-track">
    <div role="slider"
         class="slider-handle"
         aria-labelledby="volume-label"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="50"
         tabindex="0">
    </div>
  </div>
  <div id="volume-status" aria-live="polite" class="sr-only"></div>
</div>
<div class="slider-container">
  <label id="volume-label">Volume</label>
  <div class="slider-track">
    <div role="slider"
         class="slider-handle"
         aria-labelledby="volume-label"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="50"
         tabindex="0">
    </div>
  </div>
  <div id="volume-status" aria-live="polite" class="sr-only"></div>
</div>
Kevin Powell
Kevin Powell•3w ago
Ana Tudor has a fantastic article on this, including making it accessible. It's a bit old right now, so there might be a few things that are easier, but it should get you on the right track: https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
Kingpin
Kingpin•3w ago
helpful for price range filters

Did you find this page helpful?