Discrete slider error

[njezersek]

Describe the bug When the range of a slider (max-min) is not divisible by the step size (step) or the bound value of a slider is not equal to a tick position a confusing error is thrown:

Uncaught RangeError: Invalid array length
    at instance_1 (Slider.svelte:285:16)
    at init (index.mjs:1862:11)
    at new Slider (Slider.svelte:322:20)
    ...

To Reproduce Try to run the following code:

<Slider
  bind:value
  min={0}
  max={10}
  step={3}
  discrete
  tickMarks
  input$aria-label="Tick mark slider"
/>
 
<pre class="status">Value: {value}</pre>
 
<script lang="ts">
  import Slider from '@smui/slider';
 
  let value = 1;
</script>

Expected behavior For nondivisible range there are a few options:

• make the last step smaller (for example: 0, 3, 6, 9, 10) - this is also the behavior of MUI for React (https://mui.com/components/slider/)
• decrease max so the range is divisible (for example: 0, 3, 6, 9)
• throw an error that better explains the problem For nonconforming value:
• display value between the ticks
• change the value to the closest tick on init

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version: 98

[foochris]

FYI:

@njezersek https://github.com/material-components/material-components-web/pull/7458