[solved] Range + item-stacked-label

ionic-v1
1

It looks like once upon a time this was mentioned in a github issue, but I still see this behavior happening. It looks like item-stacked-label and range classes are incompatible. CodePen example here.

I’d love to be able to have a stacked label with text to the right of the label denotating the value and the slider below, e.g.

2

You can use something like this:

<label class="item ">
    <div class="item-content">Wave intensity</div>
    <div class="range range-positive">
        <i class="icon ion-minus-circled"></i>
        <input type="range" name="volume" min="10" max="20" value="14"  >
        <i class="icon ion-plus-circled"></i>
    </div>
</label>
3 Likes
3

Thanks for the workaround - I guess I didn’t even think/realize that you can just change the structure like that. Still, though, we shouldn’t need to manipulate the DOM structure to get it to behave properly.