Implement Slider Component

[traviskaufman]

• Continuous Slider
• Discrete Slider

@sgomes already doing some work on this.

Notes

Step values need to be able to be quantized to decimal places, e.g. min = 0, max = 5, step = .2. Possible algorithm: Take the raw value, divide it by step, round that number, and then multiply the original step value by the rounded number. E.g.

function quantize(val, min, max, step) {
  const numSteps = Math.round(val / step);
  const quantizedVal = numSteps * step;
  return Math.max(min, Math.min(max, quantizedVal));
}

const min = 0, max = 5, step = .2;
quantize(3.56, min, max, step); // 3.6
quantize(2.148692, min, max, step) // 2.2
quantize(1.061733, min, max, step) // 1

Copied from google/material-design-lite#4494

[chriscox]

Is this slider currently in the roadmap? Any ETA?

[traviskaufman]

@chriscox take a look in our Pivotal Tracker!

[traviskaufman]

cc @pgbross this is where we're tracking work for sliders.

If you're interested in migrating your work from #487 over to our implementation, we usually first want to see a visual prototype (which we actually already have), as well as an eng outline doc detailing how you plan on building the component. Would this be something you're interested in looking into?

If so, let us know before starting any work on the eng outline and I'll port over my visual prototype to codepen :). I worked pretty closely alongside the design team on the visual prototype so it should take away a lot of the ambiguity around the subtle design interactions that sliders require. Thanks!

[pgbross]

@traviskaufman thank you for your feedback on #487.

I am interested in looking into sliders further and am willing to have a go based on your visual prototype and beginning with the engineering outline document. Are there any eng outline documents for existing MDC-Web components or a worked example that could be used to see the style and level of detail expected in the different sections?

I will wait until you have time to port your visual prototype to codepen and look forward to seeing it in due course.

[traviskaufman]

Eng outline: https://docs.google.com/document/d/1gSZO62mZNjBpSZMyT0K3gNRjOJ6xCiDFa3VaupOdgmE/edit

[MarcMcIntosh]

https://docs.google.com/document/d/1gSZO62mZNjBpSZMyT0K3gNRjOJ6xCiDFa3VaupOdgmE/edit
that's a good way of defining what's needed :)