Hi,

Is there any way to do vertical sliders at the moment?

If not, is there any plan to do it? (not sure the specs say anything about the orientation of the slider)

Thanks!

The description is the same as the dragging property. I see the property is transiting, but is that a typo?

The Documentation shows the events instead of the actual summary.

Could you please add a variable for styling sliderBar color?
Thank you in advance

Steps to repro:

1. Visit the demo: https://elements.polymer-project.org/elements/paper-slider?view=demo:demo/index.html
2. Highlight the disabled slider example and set the disabled property to false, e.g. $0.disabled = false

Expected result: The slider now appears in its default state, with the knob and left progress bar colored blue.

Actual result: The section to the left of the knob is still gray as it was when it was disabled. (Note that this is the case even when the progress slider's value is non-zero.

With paper-sliver in version "1.0.3"

The slider not change the display value (in editable or not), when the binding value is set to undefined.

The problem is the slider keep the last value.
That is a big problem when you load some data from a web-service, and when is they are no value define.

I write a little web-component that reset the json value when you click in the button.

<dom-module id="slider-bug">
    <template>
        <h1>Not reset on change value to undefined</h1>
        <section>
            <paper-button on-tap="unsetSliderValue">
                <iron-icon icon="user"></iron-icon>
                <span>Reset Slider value = [<span>{{data.slider}}</span>]</span>
            </paper-button>
        </section>

        <paper-slider min="10" max="200" value="{{data.slider}}" editable="true"></paper-slider>

    </template>
</dom-module>

<script>
    Polymer({
        is: 'slider-bug',

        properties: {
            data: {
                type: Object,
                notity: true,
                value: function () {
                    return {slider: 15}
                }
            }
        },

        unsetSliderValue: function () {
            this.set('data.slider', undefined);
        }

    });
</script>

,

Hello,

Having problems using slider with pin.

1. Moving pin to zero = pin disappeared, slider becomes unusable
2. Unable to style slider.

What I get.
http://monosnap.com/image/DEvy9ArFjhLo0qqDSyDZJkILfzqGSb
What I want.
http://monosnap.com/image/cNb6vHglBhAd14CStdaNrMpFBwEDfr

Any plans to improve it? What I want version was working fine in version 0.5.5

Having a case where the slider value is getting set to a long floating point instead of rounding appropriately

<paper-slider min="-10" max="10" step="0.1" pin="true"></paper-slider>

On Android with Talkback:

This is not optimized for use with Talkback quite yet. Right now, when I focus one of the sliders, Talkback tells me ""Seat control, 50%"". When I tap to select this, it all of a sudden moves the value from wherever it was to 50%, so if I was at 0%, it moves it to the middle but does NOT give me a spoken indication of this value change. Also, I see no reliable way to adjust the value using touch and Talkback. Right now, when my focus is on a slider, I can place two fingers on the value and drag (same as how if I was not using Talkback, I could place one finger on the ball and drag). However, this two finger drag gesture only works when my fingers are right in the correct place on the ball/value. IF I was fully blind, I would have no way of doing this, and thus no way of adjusting the value.

When swiping linearly through the editable section, I have no indication that I can input text in an editable field. I can only reach the edit field and change the value that way when Talkback is disabled. "

When you focus the slider and adjust it with the keyboard, the pin should show in the same manner as it would when dragging.

Transforming the Polymer elements into typed classes and noticed that:

• paper-slider has behaviors:

  behaviors: [
  Polymer.IronRangeBehavior,
  Polymer.IronA11yKeysBehavior,
  Polymer.IronFormElementBehavior,
  Polymer.PaperInkyFocusBehavior
  ],

• IronFormElementBehavior has a property "value.type" of type String

• IronRangeBehavior has the same property a type Number

Although the JavaScript API is not strongly typed, but it is annotated with types is this a bug or is it possible that behaviors (sort of mixins/traits) can have different type definitions and the latest one overruled the latter or should this be fixed and is my transformation correct?

Thanks.

Element needs to be updated in conjunction with PolymerElements/paper-behaviors#32.

The demo is not showing on the elements paper-slider page.
https://elements.polymer-project.org/elements/paper-slider

Iron-form-element has a "value" property with a type of String and iron-range has a "value" property of type Number. These are conflicting and break the compiler when used together. Which value type is expected in this element and how can we handle the conflict?

The maxMarkers property does not actually limit the number of markers as seen here: http://jsbin.com/bedejo/6/edit?html,output

I'm not the only one having this problem, so I assume it has something to do with the update 2 days ago, and not with my setup.

See: http://stackoverflow.com/questions/33047174/polymer-paper-slider-gives-ripple-error

Other polymer elements work fine...

I've installed paper-slider with bower, but it doesn't seem to work. Bower is installing 1.0.7 by default, but 1.0.6 and 1.0.5 seem to produce the same issue for me.

My bower.json:

{
  "name": "polymer-fun",
  "version": "0.0.0",
  "description": "Testing out polymer!",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "iron-pages": "PolymerElements/iron-pages#~1.0.3",
    "iron-flex-layout": "PolymerElements/iron-flex-layout",
    "iron-form": "PolymerElements/iron-form",
    "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#~1.0.2",
    "paper-input": "PolymerElements/paper-input#~1.0.14",
    "paper-menu": "PolymerElements/paper-menu",
    "paper-item": "PolymerElements/paper-item",
    "paper-tabs": "PolymerElements/paper-tabs#~1.0.3",
    "paper-header-panel": "PolymerElements/paper-header-panel",
    "paper-drawer-panel": "PolymerElements/paper-drawer-panel",
    "paper-toolbar": "PolymerElements/paper-toolbar",
    "paper-input": "PolymerElements/paper-input",
    "paper-icon-button": "PolymerElements/paper-icon-button",
    "paper-fab": "PolymerElements/paper-fab",
    "paper-card": "PolymerElements/paper-card",
    "paper-button": "PolymerElements/paper-button",
    "paper-slider": "PolymerElements/paper-slider",
    "polymer": "Polymer/polymer"
  }
}

Stack Trace:

Uncaught TypeError: this.hasRipple is not a function

Polymer._focusedChanged @ paper-slider.html:721
Polymer.Base.extend._complexObserverEffect @ polymer.html:1454
(anonymous function) @ polymer.html:1298
...

Usage (from demo)

<paper-slider min="10" max="200" value="110"></paper-slider>

that line causes an error on touch devices.

I could use a slider with a binded value, an editable slider, but not an editable slider with a binded value.

I got the following error into the Javascript console:

TypeError: this.$$(...) is undefined

Here an exemple of how I use the slider:

<paper-slider min="0" max="20" editable value="{{value}}"></paper-slider>

Imagine we have a series of horizontal paper-slider on a touch screen like so:

---------------o------

-------------o--------

-------------------o--

-o--------------------

Scrolling down the page becomes very difficult as there are now four Danger Zones where the paper-slider inside the progress-bar will capture the drag event and adjust the slider value, but the user's intent was to scroll.

In order to provide a better user experience in these scenarios, it should be possible to enable gesture events only on the knob subcomponent and not the paper-progress.

I am happy to submit a PR, but first I'm looking for implementation direction here. It could be as simple as removing these lines from the element:

<paper-progress
  ...
  on-down="_bardown"
  on-up="_resetKnob"
  on-track="_onTrack">

And wrap that inside a dom-if template, however I'm not sure that's elegant as it would make for repeated code. Thoughts?

The following CSS selector is not being applied when at the minimum value:

.disabled.ring > #sliderKnob > #sliderKnobInner {
background-color: transparent;
}

This results in the background-color being set by the previous rule in the file. If I change it to something like this, it does work:

background-color: var(--paper-slider-disabled-knob-color, transparent);

The other issue in this selector is that it does not deal with the border of the knob. It's not easy to see with the default border color but if you use the --paper-slider-knob-start-border-color style you can see it is left as is when disabled. There is not a corresponding disabled style for this.

Also, it should be "grayed out" when disabled if the --paper-slider-knob-start-color is set but it should be transparent if the default transparent style is used.

One final general issue: The active portion of the slider and the knob are being set to a different shade of gray than the rest of the slider when disabled. It looks to me like the spec. wants the entire slider to be the same disabled color.

https://www.google.com/design/spec/components/sliders.html#sliders-continuous-slider

Hi,

It would be cool for the paper-slider to allow two or more 'handles'. In our use case specifically two so a user can define a range of numbers for something.

Something like this:

I'm opening this solicitation for feedback if this is within the 'scope' of paper-slider. If so, I'm interested in doing a PR for it.

The value of a paper-slider element is not included in the payload of a form submission. Perhaps the name given to the paper-slider could be given to the actual paper-input element. It would probably also be good to include a hidden input element with the slider's name and value when the slider is not marked as editable.

It seems that an arrow-key press invokes key events twice and results in two steps movement. This issue can be reproduced in any browsers on OS X.

Hello,
When I use the <paper-slider editable></paper-slider>
element, everything works as in the demo, until I type more than 3 characters into the input, at which point text gets cut off(The fourth character gets chopped in half and more characters don't appear at all). I think this is supposed to be controlled from within paper-slider element, not styled from the outside. Is this incorrect?

Tried it both in FF 39 and Chrome 45. If Polymer is using full shadow dom then the paper-slider editable input does not work as expected.

If a value is typed into the input box and then Enter is pressed or focus is changed the slider does not react as it usually does in ShadyDom mode. However, changing the slider does change the value in the input box in full ShadowDom mode.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="webcomponents-lite.js"></script> <!-- Tried both -lite and full. -->
  <link rel="import" href="paper-slider/paper-slider.html">
</head>
<body>
  <paper-slider editable min="0" max="200" snaps="true" step="5"></paper-slider>
</body>
</html>

The paper-slider's value property returns a string under the following conditions:

• The value property is bound to the property of an object, like so: value="{{foo.bar}}"
• The paper-slider has been made editable.
• The user types into the paper-slider's input field instead of using the slider.

In such an instance, console-logging foo will result in { bar: "1" } where { bar: 1 } is expected.

This is somewhat related to #32, but this is just to be able to bind to immediateValue to make an immediate change in other elements without leaving declarative code. As it is, you have to bind to value, which only updates when the user finishes dragging the knob.

I use a slider into a form inside a the drawer part of a paper-drawer-panel.
In large mode, everything is Ok, but in narrow mode, if I move the slider, the drawer panel come with the mouse and close the drawer instaid of allow me to modify the slider position only.

Here, a simple exemple with the problem.

<!DOCTYPE html>

<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Slider in drawer</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="bower_components/paper-slider/paper-slider.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  </head>

  <body unresolved class="fullbleed layout vertical">
    <template is="dom-bind">
        <paper-drawer-panel id="navDrawerPanel" responsive-width="1280px" drawer-width="350px">
            <div drawer>
                Drawer panel
                <paper-slider min="0" max="20"></paper-slider>
            </div>
            <div main>
                <paper-icon-button icon="icons:menu" paper-drawer-toggle></paper-icon-button>
                Main panel
            </div>
        </paper-drawer-panel>
    </template>
  </body>
</html>

1. This js error comes up in Chrome on Android touch device as soon as you click somewhere on the slider to make it move to another position. It works fine on Chrome 44.0.2403.157 on Windows7.

Uncaught TypeError: event.detail.sourceEvent.preventDefault is not a function @ paper-slider.html:409

System:

• paper-slider v1.0.4 plus fix#41 #41
• Chrome v44.0.2403.133 on Android touch device.

ReferenceError: event is not defined

At line 332 of paper-slider.html.

There is a custom property that allows the slider height to be changed, but not one for the knob...

http://codepen.io/robrez/pen/jbmRYQ?editors=100

I'm not sure if it would be better to

• expose one for the knob
• derive knob height based on slider height
• stop exposing slider height
• something else

I am using paper-slider as a seek bar for a video element. The current styling of the knob at that position is transparent with a border, which seems to me to be very akin to a disabled state. I would appreciate it if the 0 value knob styling was a variable or more easily editable.

Dragging the slider should update the input and vice versa. But currently it doesn't work.

If paper-slider is placed inside another drag-able element such as a drawer, both elements react to the event.
I wonder if I am doing it wrong or it is a bug.

Used here: https://github.com/PolymerElements/paper-slider/blob/master/paper-slider.css#L22

::shadow has been deprecated and all use should be ported to custom properties or other styling techniques.

Hello,
I need help in handling 'immediate-value-change' event and value.
I can successfully handle {{value}} when it changes, but not 'immediate' one.

Thanks in advance,
Valentin

The slider only responds to tracking in the X direction, where it would be nice if it responded to tracking in the direction of the slider if it's rotated. The extreme example of this is when the slider is vertical, and you cannot drag the knob in any meaningful manner. Would this feature be a possibility?

It would be nice if this was a two way slider i.e. a range that the user can move the Min and Max Pin and it has two outputs and not just one.

Use Case:
-> Filter by "Price Range" in a shopping cart.

Some implementations
-> https://github.com/ewgenius/paper-interval-slider

I would be nice if polymer had this in its paper element set

Would be great to be able to bind a value to immediateValue, especially two-way binding. Currently need to do repeated calls to increment() and decrement() to change value. It just seems wrong to have to do a hundred calls to increment().

Now that would be nice.

<paper-slider min="1" max="7" value="3" step="2" pin snaps></paper-slider>

I would expect that my slider values would snap 1, 3, 5, 7 but that is not the case. Slider starts at 2 and cannot ever reach 1. The snap indicators is not where the knob snaps to. The final snap value shows '8' in the knob, but the actual value is 7.

Use a paper slider in a custom element similar to the following:

        <paper-slider
            id='progressBar'
            disabled="[[!canSeek]]"
            hidden="[[!isValidDuration(duration)]]"
            on-change="onSliderChange"
            min="0" max="100"
            value="[[getCurrentTime(currentTime)]]"></paper-slider>

When the canSeek property is updated, the slider is not redrawn. However, if following that the value is updated, the slider is drawn in the correct state. Also, if it is enabled, but is drawn disabled, the end-user can interact with it, at which point it redraws in the correct state.

I was a bit thrown off when I saw the term progress bar repeated throughout the documentation. The secondary progress custom properties in particular caused me to believe the docs were incorrect.

Then I saw it's because paper-slider contains a paper-progress. Do you think we could add a secondary progress example to the demo?

I was struggling to think of good use-case for secondary-progress; Now I realize that it could be a nice way to indicate a "normal range" or "critical range", etc for a value.

In the paper-elements catalog, the paper-slider demo is not visible.
https://elements.polymer-project.org/elements/paper-slider

Hello to everyone!
marker did not work

      <template is="dom-if" if="[[snaps]]">
        <div class="slider-markers horizontal layout">
          <template is="dom-repeat" items="[[markers]]">
            <div class="slider-marker flex"></div>
          </template>
        </div>
      </template>

...
        markers: {
          type: Array,
          readOnly: true,
          value: []
        },
...

or it should be with item here

            <div class="slider-marker flex">{{item}}</div>

is it in progress?

and why not {{something}} instead [[something]]?

With Voiceover/Chrome: not able to use the keyboard to adjust the slider. Also, I'm not able to navigate to the number input text fields to enter a numeric value.

On Chrome OS/Chromevox, I am able to adjust the slider using the arrow keys. This works well. However, I am not able to access the text to manually input numbers to adjust the value.

Still need to test with Windows.

When slider's value property changes, the element fires immediate-value-change event.

Example:

var ps = document.querySelector('paper-slider');
ps.addEventListener('immediate-value-change', function() {
  console.log('event fired!');
});

When user drags the slider, 'event fired!' appears in the dev console as you would expect.

When you execute this:

ps.value = 10;

another 'event fired!' will appear in the console.
That's a bug because immediateValue "is updated while the user is dragging the slider", and in this case there was no dragging.

Also worth noting, the event will fire only when the value changes.

Title says it all. Here's an example of what I mean.

When tapping on the slider, the knob will go to that location exactly - whereas the slider will fit to a valid value. That will leave a gap between the slider position and the knob position.

Here's a screenshot:

This does not happen if you slide the knob by click and drag - only when tapping somewhere on the progress bar.

This is most noticable when max value is low (try setting it to 2 or 3)

I use the paper slider to select values from -1.0 to +1.0, the default being 0.0 and the step 0.01:

<paper-slider editable="true" class="red" min="-1.0" max="1.0" step="0.01" value="0.0">

While the slider functionality works, i have two appearance issues, illustrated in the screenshot:

1. The slider bar progress bar cannot work with step smaller then 1, so it is either a 0 or 1 (full).
2. When loaded, the "editable" is empty, see the blue slider. As soon as I change the slider, the numbers appear
   

Thanks very much & best regards.