md-slider md-min but no md-max

[OlsonDev]

Sliding an md-slider to the minimum value adds a class md-min which effectively whites out the thumb control (making it a circular outline). Why is there no md-max class when the md-slider is at the maximum value? I'm not sure what the style should be but it seems odd to have that inconsistency.

The code in question is:

/**
 * @param percent 0-1
 */
function setSliderPercent(percent) {
  activeTrack.css('width', (percent * 100) + '%');
  thumbContainer.css(
    'left',
    (percent * 100) + '%'
  );
  element.toggleClass('md-min', percent === 0);
}

While in there, how about:

var percentStr = (percent * 100) + '%';
activeTrack.css('width', percentStr);
thumbContainer.css('left', percentStr);

to DRY it out a little?

[CarmenPopoviciu]

@ThomasBurleson what would be the expected look and feel of the slider thumb in this case? Looking at https://www.google.com/design/spec/components/sliders.html# there doesn't seem to be one.

[OlsonDev]

I think when I created this issue, I was more concerned about styling adjacent elements and/or using querySelector/querySelectorAll than actually changing how the thumb appears. Regardless of if the thumb changes appearance, I think this change would be welcome... for consistency and external utility.

[CarmenPopoviciu]

Yes I definitely agree with you. I just wanted to clear up this detail before I make my pull request :)

[ThomasBurleson]

@here - If the minimum value is an empty circle, then perhaps the maximum value should be represented with a filled circle: using a md-max-value. And perhaps we change the name also of the minimum to "md-min-value".