wc-slider demo

by Dominic Myers

HTML

<link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

  <script type="module" src="https://cdn.skypack.dev/@annoyingmouse/wc-slider/wc-slider.js"></script>

  <h2>Examples</h2>
  <h3>Basic Example (my original colours)</h3>
  <wc-slider></wc-slider>
  <h3>Changing <code>width</code> attribute randomly (<span id="width">100</span>%) every ten seconds between 50% and 100%</h3>
  <wc-slider id="widthTest"></wc-slider>
  <h3>Changing <code>min</code> and <code>max</code> attributes randomly (<span id="min">1</span>, <span id="max">7</span>) every ten seconds</h3>
  <wc-slider id="minMaxTest"></wc-slider>
  <h3>Changing <code>from</code> and <code>to</code> attributes randomly (<span id="from">#afd6f3</span>, <span id="to">#2b91de</span>) every ten seconds</h3>
  <wc-slider id="fromToTest" from="eee" to="ddd" value="7"></wc-slider>
  <h3>Changing <code>deselected-from</code> and <code>deselected-to</code> attributes randomly (<span id="deselected-from">#d0d5d5</span>, <span id="deselected-to">#7f8c8d</span>) every ten seconds</h3>
  <wc-slider id="deselectedFromToTest"></wc-slider>

CSS

body {
  font-family: 'Figtree', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Figtree', sans-serif;
}

JavaScript

;(() => {
  const getRandomInt = (min, max) =>
    Math.floor(
      Math.random() * (Math.floor(max) - Math.ceil(min)) + Math.ceil(min)
    )
  const getRandomColor = () => {
    const letters = '0123456789ABCDEF'
    let color = '#'
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)]
    }
    return color
  }

  setInterval(() => {
    const attributes = [
      'width',
      'min',
      'max',
      'from',
      'to',
      'deselected-from',
      'deselected-to',
    ]

    const widthTest = document.getElementById('widthTest')
    const width = getRandomInt(50, 100)
    widthTest.setAttribute('width', width)
    document.getElementById('width').innerText = width

    const minMaxTest = document.getElementById('minMaxTest')
    const min = getRandomInt(1, 200)
    const max = getRandomInt(min + 3, min + 20)
    const value = getRandomInt(min, max)
    minMaxTest.setAttribute('min', min)
    minMaxTest.setAttribute('max', max)
    minMaxTest.setAttribute('value', value)
    document.getElementById('min').innerText = min
    document.getElementById('max').innerText = max

    const fromToTest = document.getElementById('fromToTest')
    const from = getRandomColor()
    const to = getRandomColor()
    fromToTest.setAttribute('from', from)
    fromToTest.setAttribute('to', to)
    fromToTest.setAttribute('value', '7')
    document.getElementById('from').innerText = from
    document.getElementById('to').innerText = to

    const deselectedFromToTest = document.getElementById('deselectedFromToTest')
    const deselectedFrom = getRandomColor()
    const deselectedTo = getRandomColor()
    deselectedFromToTest.setAttribute('deselected-from', deselectedFrom)
    deselectedFromToTest.setAttribute('deselected-to', deselectedTo)
    deselectedFromToTest.setAttribute('value', '1')
    document.getElementById('deselected-from').innerText = deselectedFrom
    document.getElementById('deselected-to').innerText = deselectedTo
  },...