Polymer paper-slider behaves strangely when setting "min" by data binding

Question

I am using Polymer's paper-slider in my custom element. I am passing a min property in my custom element and assigning it to the min value of the slider. However the slider is behaving strangely, where it does not slide until the cursor goes to either extreme and the value keeps changing in a very high range.

Here is the code:

<link rel="import" href="/bower_components/paper-slider/paper-slider.html">

<dom-module id="slider-two">
    <template>
        <br>
        <br>
        <paper-slider pin min=[[min]]></paper-slider>

    </template>
    <script>
        Polymer({
            is: 'slider-two',
            properties: {
                min: {
                    type: String
                }
            }
        });
    </script>

</dom-module>

Usage:

<slider-two min='5'></slider-two>

What is the error in the code which causes this strange behaviour. Replacing min=[[min]] in the code by max=[[min]] gives the expected correct result, and the strange behaviour is caused by min only. I have tried changing the name to something other than min too.

I installed it using bower i --save paper-slider and I am using Polymer 1.0.0 (for it to be compatible with a certain leaflet-map).

Answer 1

Probably the issue is that you are declaring the min property as a String but according to the documentation it should be a number: paper-slider docs.

min: number = 0 notify
Inherited from Polymer.IronRangeBehavior

The number that indicates the minimum value of the range.

Try declaring min as Number:

Polymer({
    is: 'slider-two',
    properties: {
        min: {
            type: Number
        }
    }
});