when setting the step to the px-slider to something like .01 the handles don't work properly. They are sometimes together somewhere along the range and when you drag either of them there are sometimes where it snaps to the opposite handle even if you are dragging in the opposite direction.

Example Code:

http://codepen.io/anon/pen/BpqamL?&editors=1001

Screen Shot:

This is a weird one, but moving the handle on option 2 causes both option 1 and option 2 code to run. Weird encapsulation issues with demo.

Expected behavior and actual behavior:

sample html in the repo(dev.html) contains a legacy attribute start-value that should be changed to value instead.

Environment:

Slider Version 1.0.3
Browsers: N/A

Screenshots:

Looks like px-modal breaks some mouse event handling of px-slider with Firefox. User can not drag handles (they just jump to edges).

Simple code to reproduce the issues (happens at least on pages without theming rules):
https://gist.github.com/alump/2d1d4d427f0f20f8ea9b772d415962fb

Will attach code also as comment below.

Just copy-paste somewhere where px-modal and px-slider are available. And try with Firefox.

The latest version of px-slider 2.2.0 is causing our build to fail with the below error:

undefined:1625
throw new JS_Parse_Error(message, filename, line, col, pos);
^
SyntaxError: Unexpected token: punc (()
at JS_Parse_Error.get (:86:23)

Downgrading to 2.1.0 does not cause the error and the build goes through successfully.

Go to demo page.
Enter negative value for max or change min and make max lower.
Watch it explode.

Slider should check that the min is < max and either warn or flip them if they are wrong.

When the slider is hidden, such as when it's placed within a modal, the slider position is not calculated correctly, and is set to a negative value. This is due to the fact that the _translateValueToPosition function uses the slider container's offsetWidth attribute, which is 0 when an element isn't shown.

Line 294 in the current code:
var cW = this.$.sliderContainer.offsetWidth - cO;

Submit an Issue

Hi,

Thanks for helping us improve the Predix UI platform by submitting an issue.

Before you begin, please check the list of existing issues to avoid submitting a duplicate issue.

To help us solve this issue as fast as possible, please fill out the following sections:

Expected behavior and actual behavior:

On demo page, when "Show labels" is toggled on, the labels do not show on the slider.

Steps to reproduce the problem:

1. Visit https://www.predix-ui.com/#/elements/px-slider
2. Toggle on Show Labels

Environment (component version number, Browser (including version), operating system, hardware, etc): Chrome 67, Safari 11.1, MacOS

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the component by going to https://predix-ui.com, finding the component in question, and clicking on the pencil icon under the demo.

    Once you've created your code example, you can save it under a new url.
    Please note that you should NOT use the same methods for production as the ones used in codepen - these methods are not production ready.

On page load, default "end value" is NaN" and trying to reset it will cause an "expected number" error in the console.

This is only in Chrome, other browsers strangely have the correct value.

I would like to use the slider component where the text field showing the value isn't visible.

a) Say px-slider has min and max values as 0 and 100 respectively
b) Click on min text box enter the value as 10 and press ESC key
c) Min value is shown as 0 (which is correct) but the handle is shown moved to 10.
d) Same thing happens with Max value.
e) Reproducible in https://www.predix-ui.com/#/components/px-slider/

Hi Team,

I am using 10 px-Slider along with px-datetime-range-panel,px-context-browser and px-rangepicker.

In my preview the Px-slider bars are not moving at all.

But it was working fine if there are only sliders and no other px-component,

Please can you check and help me with my query.

Regards,
vikas

Expected behavior and actual behavior:

I am planning to use px-slider in our application. Tried using the slider which shows the range (option2). I wanted to customize the multiHandleSVG sass property which shows the arrows indicating the min and max value as I want both the min and max value to have the arrows in the same direction(like the min one). Is it possible to override this property? The reason being, I want to use this as a slider for another component which will be built right above this slider.

Thanks.

Expected behavior and actual behavior:

Setting value to contain any decimal numbers gets rounded up/down in the text-input box. Only exception is to have "step" set to a decimal value in which case, the text-input value remains a decimal number.

Steps to reproduce the problem:

See Code snippets below.

Environment:

Slider Version 1.0.3
Browsers: All

Screenshots:

Value set to "49.3"/Code Snippet 1 :

Value set to "49.8"/Code Snippet 2 :

Value set to "49.8" & Step set to 0.5/Code Snippet 3 :

Code Snippet 1:

  <px-slider id="slider1" value="49.30" min="1" max="120" step="10"></px-slider>

Code Snippet 2:

  <px-slider id="slider1" value="49.80" min="1" max="120" step="10"></px-slider>

Code Snippet 3:

  <px-slider id="slider1" value="49.08" min="1" max="98" step="0.05"></px-slider>

Currently, other than styling the div, there is no way to customize the slider's height/width.

Future enhancement?

Code Snippet:Current styling approach

<div id="thirteenthone" style="width:320px">
      <px-slider...> </px-slider>

Screenshot:

Code Snippet: Nice to have...

<px-slider
        height=200
        width=320
        value="100"
        ...
      >

Expected behavior and actual behavior:

Slider's value indicator will expand to fit the value being inputed.

Steps to reproduce the problem:

Set the max value to 100000 or greater. Move the slider past 100,000 and the value indicator will start clipping.

Environment (component version number, Browser (including version), operating system, hardware, etc):

Reproducible here https://www.predix-ui.com/#/components/px-slider/
v0.8.0 on Opera 42.0 Linux Mint and Chrome 55 on Windows 10

Screenshots (optional, but very helpful):

Code examples help us better understand the issue - follow the appropriate codepen for the

We are noticing that there is an infinite loop in method _validateValue where it calls this.set(thisVal, v) (thisVal = "endValue", v = 0....for example) before it returns valid true or false. The _endValueChanged method is listening for changes to "endValue" and it calls the _validateValue method that creates the loop.

"Uncaught RangeError: Maximum call stack size exceeded"

hopefully this makes sense

Expected behavior and actual behavior:

For representing data which has a large range it is more user friendly to utilize a logarithmic scale to represent the exponential growth certain data exhibits. Classic examples of this are the Ph scale, Richter scale, and decibel scale. My use case is health care costs which unfortunately also seem to operate over a wide range like this.

Expected would be that you can set min and max like normal but set a scale attribute with a scale like ln or log10 which then compensates for the scale so that the value can be used directly in calculations.

Expected behavior and actual behavior:

Placing labels at the bottom of the slider should be aligned.

Steps to reproduce the problem:

See Code Snippet

Environment:

Slider version: 1.0.3
Browsers: FF(52.0.1) and IE11

Screenshot:

Code snippet:

<px-slider
        id="sliderMulti5"
        value="10"
        end-value="150"
        min="-20"
        max="160"
        is-range
        show-labels
        max-label-position="top"
        min-label-position="bottom"
        disabled
        hide-inputs
      >
      </px-slider>

Expected behavior and actual behavior:

Even though an "end-value" is set as an attribute, the slider always defaults to the default max(100) if a max value is not also set. For example, if the end-value is set to 3000, but no max attribute is added, the right hand side value of the slider is set to 100.

Steps to reproduce the problem:

See Code Snippet

Environment:

Slider version 1.0.3
Browsers: All

Screenshots:

end-value set to 3000, slider has 100(default max):

Code Snippet:

<px-slider
        min="20"
        value="25"
        end-value="3000"
        is-range
        step="1"
        show-labels
        max-label-position="bottom"
        min-label-position="bottom"
      >
      </px-slider>

Expected behavior and actual behavior:

Placing labels on top should show the label on top of the slider, but the labels are cutoff on the top.

Steps to reproduce the problem:

See Code Snippet below.

Environment:

Slider Version: 1.0.3
Browsers: All (Chrome, FF, Safari, IE1)

Screenshots (optional, but very helpful):

Code example

  <px-slider
        id="sliderMulti10"
        value="120.45"
        end-value="2000"
        min="-10"
        max="2500"
        is-range
        step="100"
        show-labels
        max-label-position="top"
        min-label-position="bottom"
      >
      </px-slider>

Additional Notes:

If the Y value is adjusted from (-15) to (-10) in the debugger, the issue is corrected.

Expected behavior and actual behavior:

Using culture/currency correctly assigns the right currency to the range values; however, as soon as you attempt to move the handles, the currency value reverts back to $.
Screenshots below.

Steps to reproduce the problem:

See Code Snippet.

Environment:

Slider version: 1.0.3
Browsers: All

Screenshots:

Initial State:

Left handle adjusted from default:

Code Snippet:

      <px-slider
        id="sliderMulti2"
        culture="fr-FR"
        currency
        value="25"
        end-value="120"
        min="20"
        max="500"
        is-range
        show-labels
        max-label-position="top"
        min-label-position="top"
      >
      </px-slider>

Enhancement Request:

Would be nice to flag errors for step and scale attributes specifically.

1. If there is a typo in scale category, e.g. lineari, it silently fails with no errors are generated in the console log; however, if an attempt is made to move the handle bars on the slider, an invert error is issued.

2. Somewhat similarly, if an invalid type(char) is assigned to step, value, max, min, it results in a generic NaN error from d3 in console log.

3. If a negative number is assigned to "step", it just treats the step assignment as a positive value. Maybe good if this could be flagged rather than reassigned.

4. Enhanced error checking when using base on non-logarithmic sliders, and exponent on non-exponential sliders.

5. If a "value" has a value less than what min is set to, "min" will supersede and the slider will start at "min". Might be good to flag with a warning rather than reassigned. Example: <px-slider value="10" min="20"....>

Screenshot for an invalid scale after handle is engaged:

Code Snippet:

<px-slider id="test1" scale="exponential=" .... > </px-slider>

Screenshot for an invalid step:

Expected behavior and actual behavior:

A disabled slider is supported across all browsers, except IE11. See the screenshots below from IE11 vs. Chrome.
Notice how the slider width is shrunken down making it unreadable but it does seem to be disabled.

There are no errors in the console log.

Steps to reproduce the problem:

See Code Snippet and view in IE11.

Environment:

Slider version: 1.0.3
Browser: IE11

Screenshots:

IE11:

Chrome:

Code Snippet:

<px-slider
        id="sliderMulti5"
        value="10"
        end-value="150"
        min="-20"
        max="160"
        is-range
        show-labels
        max-label-position="top"
        min-label-position="bottom"
        disabled
        hide-inputs
      >
      </px-slider>

Expected behavior and actual behavior:

Using numbro.js formatting rules(0,0), tried adding a comma in the sliders' text-input (range boxes) with culture&currency set. The comma was not placed, although the spacing was changed to accommodate for that addition.

This seems to work ok when culture is not an attribute (2nd screenshot below).

Steps to reproduce the problem:

See Code snippets below

Environment:

Slider version: 1.0.3
Number-formatter version: 3.0.5
Browsers: All

Screenshots:

Culture set/Comma missing:

Default Culture/No Culture set:

Code Snippet 1:

<px-slider
       
        culture="fr-FR"
        currency
        value="2500"
        end-value="5500"
        min="2000"
        max="5000"
        format="0,0"
        is-range
        show-labels
        max-label-position="top"
        min-label-position="top">
      </px-slider>

Code Snippet 2:

<px-slider
        currency
        value="2500"
        end-value="5500"
        min="2000"
        max="5000"
        format="0,0"
        is-range
        show-labels
        max-label-position="top"
        min-label-position="top">
      </px-slider>

Expected behavior and actual behavior:

Currently if you have labels placed on the slider (top or bottom), the handle can overlay the label depending on its position. Checked with the design team, their direction is to have the label visible no matter where the handle is placed, which potentially means increasing the height of the component and placing the label under (or above the handle).

Environment:

Slider Version 1.0.3
Browsers: All

Screenshots:

Code Snippet:

  <px-slider
        id="sliderMulti8"
        value="0"
        end-value="200"
        min="0"
        max="250"
        is-range
        step="50"
        show-labels
        max-label-position="top"
        min-label-position="bottom"
      >
      </px-slider>