mdSlider: Allow non-linear slider values

[WillsB3]

Sometimes a slider may be required which does not have a linear scale for it's possible values. We have a use case where a slider represents the playback speed of a YouTube video where the available values are: 0.25, 0.5, 1, 1.25, 1.5, 2. This is not possible with the current angular-material implementation.

This is just one example, you could have a slider that required a logarithmic scale for instance.

It'd be nice if there was a way to explicitly determine the available steps of a slider. Alternatively, if it were possible to define a mapping of UI values to actual model values that might also be a solution.

[ThomasBurleson]

One option is to support a step model attribute that supports a step data model for discrete sliders.

<md-slider ng-model='playRate' md-steps='[0.25,0.5,1,1.25,1.5, 2]' />

If the developer needs to control the ability to visually position the steps (on the track), the steps could be an array of {value:'',distance:''} objects [instead of numbers, as shown above]:

$scope.playOptions = [
  { value : 0.25, distance : 0.125 },
  { value : 0.5, distance : 0.25 },
  { value : 1.0, distance: 0.5 },
  { value : 1.25, distance : 0.625 },
  { value : 1.5, distance : 0.75 },
  { value : 2.0, distance: 1.0 }
];

<md-slider ng-model='selectedRate' md-steps='playOptions' />

[plato-cambrian]

html5 input[type="range"] definesmin max step` attributes
http://html5tutorial.info/html5-range.php

On Wed, Nov 12, 2014 at 12:06 PM, Thomas Burleson [email protected]
wrote:

One option is to support a step model attribute that supports a step data
model for discrete sliders.

If the developer needs to control the ability to visually position the
steps (on the track), the steps could be an array of
{value:'',distance:''} objects [instead of numbers, as shown above]:

$scope.playBackSteps = [
{ value : 0.25, distance : 0.125 },
{ value : 0.5, distance : 0.25 },
{ value : 1.0, distance: 0.5 },
{ value : 1.25, distance : 0.625 },
{ value : 1.5, distance : 0.75 },
{ value : 2.0, distance: 1.0 }
];

—
Reply to this email directly or view it on GitHub
#623 (comment).

[WillsB3]

@plato-cambrian I'm fully aware of that, but I don't believe Angular-Material is aiming to only support those features that HTML5 supports natively.

This issue was raised as it's a feature that could be supported to allow the angular-material slider to provide maximum flexibility.

@ThomasBurleson That's a pretty neat idea. Your suggestion would also allow us to support having a different "display value" to be rendered in the discreet bubble. In example use case above the values are 1, 1.25, 1.5 etc yet in the UI these are actually represented as "1x", "1.25x", "1.5x". We could easily support this by simply adding an extra key/value pair to $scope.playOptions object.

[plato-cambrian]

@wills bithrey I certainly agree that it would be great to implement custom
steps on a slider!

On Wed, Nov 12, 2014 at 2:08 PM, Wills Bithrey [email protected]
wrote:

@plato-cambrian https://github.com/plato-cambrian I'm fully aware of
that, but I don't believe Angular-Material is aiming to only support what
HTML5 supports natively.

This issue was raised as it's a feature that could be supported to allow
the angular-material slider to provide maximum flexibility.

—
Reply to this email directly or view it on GitHub
#623 (comment).

[omidahourai]

+1

[mfdev1]

+1

[mikcox]

+1

[zargold]

I am working on this PR. I think I find it cleaner to have a separate directive for this as there so many differences especially since I'm not sure if my tailored use case will match others (I am told I need mine to be evenly split based on the custom steps rather than their value)...
e. g. [ 0-----3-----20-----497-----2000]. I'll be using the source code to make it and perhaps it won't be fully functional yet.