md-slider readonly mode

[dohomi]

Hello,
I couldn't find the possibility for having a md-slideras readonly. Currently I only found an example for ng-disabledbut I guess a md-discretein combination with ng-readonly would be very useful for displaying a property in a detail view. Thanks

[kennethcachia]

Hi!

Readonly states for sliders are not specified and it’s also not implemented on Polymer’s paper sliders.

I discussed this with someone on the Material Design team and we agree that we shouldn’t present a slider that can’t be changed.

Can you provide additional details on why you need a readonly state for a slider?

Thanks!

[dohomi]

Hi @kennethcachia

Thanks for your reply. I try to solve a star rating which works very nice with this component. In the end there should be a view of the form where I would like to show the star rating result.

For sure I could write a displaying component which renders md-iconstars. My previous component was similar to this one: http://plugins.krajee.com/star-rating

Cheers!

[ThomasBurleson]

@kennethcachia - this is a interesting and viable (IMO) use case for slider: discrete steps skinned to render stars as the discrete steps. Should this be reconsidered as a valid driver for read only sliders?

Breadcrumbs also come to mind...

Granted I think the skinning requirements are more effort than simply using a repeater with md-icons.

[kennethcachia]

Thanks @dohomi!

@ThomasBurleson I agree, but I'm inclining towards implementing this as a new component with the appropriate attributes. I spoke to someone on the Material team and they don't have any plans for star rating widgets yet. Should we get back to this later?

[dohomi]

We came up with following directive:

stars.html
<div layout>
    <md-icon md-svg-icon="toggle:ic_star_24px"
             ng-repeat="i in range(value)"></md-icon>
    <md-icon md-svg-icon="toggle:ic_star_outline_24px"
             ng-repeat="i in range(max-value)"></md-icon>
</div>


stars.js
angular.module('ptUtil')
    .directive('ptStars', starDir);

function starDir() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            max: '=',
            value: '='
        },
        templateUrl: 'stars.ng.html',
        link: link
    };
    function link(scope, element, attrs) {

        scope.range = _.range;
    }
}

Cheers