polymerelements / paper-slider Goto Github PK
View Code? Open in Web Editor NEWA Material Design slider
A Material Design slider
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)
The paper-slider's value
property returns a string under the following conditions:
value
property is bound to the property of an object, like so: value="{{foo.bar}}"
editable
.In such an instance, console-logging foo
will result in { bar: "1" }
where { bar: 1 }
is expected.
,
Uncaught TypeError: event.detail.sourceEvent.preventDefault is not a function @ paper-slider.html:409
paper-slider/paper-slider.html
Line 410 in 786197f
System:
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.
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:
Thanks very much & best regards.
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>
Could you please add a variable for styling sliderBar color?
Thank you in advance
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>
When you focus the slider and adjust it with the keyboard, the pin should show in the same manner as it would when dragging.
ReferenceError: event is not defined
At line 332 of paper-slider.html.
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?
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.
The demo is not showing on the elements paper-slider page.
https://elements.polymer-project.org/elements/paper-slider
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!
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>
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
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
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
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.
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]]?
In the paper-elements catalog, the paper-slider demo is not visible.
https://elements.polymer-project.org/elements/paper-slider
Steps to repro:
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.
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.
paper-slider/paper-slider.html
Line 379 in 786197f
that line causes an error on touch devices.
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>
Title says it all. Here's an example of what I mean.
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.
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?
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.
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>
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.
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.
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.
Element needs to be updated in conjunction with PolymerElements/paper-behaviors#32.
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.
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"
}
}
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
...
<paper-slider min="10" max="200" value="110"></paper-slider>
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?
The maxMarkers
property does not actually limit the number of markers as seen here: http://jsbin.com/bedejo/6/edit?html,output
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?
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. "
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.
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.
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.
Hello,
Having problems using slider with pin.
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
<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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.