Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

wired-slider value attribute not updating

See original GitHub issue

My Pain

I’m trying to use the wired elements and I’m having problems with the wired-slider because it does not react correctly to the value attribute.

I would expect the slider visually to be at beginning in both examples shown below

Reproducible Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-loader.js"></script>
    <script type="module" src="https://unpkg.com/wired-slider@2.0.0/lib/wired-slider.js?module"></script>
</head>

<body>
    <wired-slider id="slider" value="0" knobradius="15" class="wired-rendered" style="margin: 0px"></wired-slider>
    <br />
    <wired-slider knobradius="15" value="5" min="5" max="15"></wired-slider>
</body>

</html>

Is this a regression?

Yes. I have seen it working in previous versions.

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

apennamencommented, Apr 10, 2020

I’ve tested the video component, I don’t know what is the expected behaviour. With the modification suggested previously, volume is at 100% when video begins.

@pshihn I wonder why all this complexity was added on the slider side for the video ?

1reaction

apennamencommented, Apr 10, 2020

Hello, I was able to reproduce, and I agree it has to be fixed. Seems to be a regression links to this commit: https://github.com/wiredjs/wired-elements/commit/9b1b5460514b375b82ace962da58f9fc06f96c23#diff-9f5c646f774ca45f8639d095bf011f0f

I think method firstUpdated should be:

firstUpdated() {
    this.value = this.pendingValue || +(this.getAttribute('value') || this.value || this.min);
    delete this.pendingValue;
}

instead of (actual):

firstUpdated() {
    this.value = this.pendingValue || this.value || +(this.getAttribute('value') || this.min);
    delete this.pendingValue;
}

I’ve tested the slider element with the modified firstUpdated method and it works. I don’t know if there are other impacts.

I can make a PR with this modification if wanted.

Top Results From Across the Web

Input type=range does not update its value - Stack Overflow

val(0) , the slider is updated, but when I change from 0 to 5, the onchange="sliderMinUpdate(this. value)" is not called.

InputSlider not updating on binding change

Hi,. I'm having issue with the MDBInputRange component. Expected behavior Updating the slider value through updating the slider property value.

Playing With The HTML5 range Slider Input - the new code

Setup, Accessibility And Attributes. At the basic level, a range input should have at least three attributes: min (the lowest accepted value), ...

Managing State - Stimulus Handbook - Hotwire

Stimulus will create a this.indexValue controller property associated with a data-slideshow-index-value attribute, and handle the numeric conversion for us.

3DS Max Slider Manipulator Control Multiple Parameters In ...

In this video, we learn how to use the Slider helper to control ... by animating the value of the slider, we can...