jQuery UI Range Slider for column data like "from 3 to 44"

[kurtzaugg]

I would like to use jQuery UI Range Slider to filter data in a column where I have a lower value and a higher value, e.g. "3 - 44" or "2 - 54". The left slider "button" from the range slider should only consider the value before the dash (e.g. "3" or "2"), and the right slider "button" should only consider the value after the dash. I know that I could have to range sliders, but I like to have only one. Is that possible?

[1rosehip]

I'm not sure if I fully understand your need, but consider using Range toggle filter control: http://jplist.com/controls/range-toggle-filter

[kurtzaugg]

Thanks for your answer. Unfortunately, it's not what I'm looking for. This filter also uses only one value - but in my example there are two values; a lower and an upper value.

[1rosehip]

Please send some image / screenshot / link to similar of such a slider. It will help me to understand your request better.

[kurtzaugg]

[1rosehip]

The feature is implemented. Please download the latest core file here: https://raw.githubusercontent.com/no81no/jplist/master/dist/js/jplist.core.min.js

Slider control data-path should be changed:

<div 
    class="jplist-range-slider"
    data-control-type="range-slider" 
    data-control-name="range-slider-prices" 
    data-control-action="filter"
    data-path=".from, .to"
    data-slider-func="pricesSlider" 
    data-setvalues-func="priesValues">

    <div class="value" data-type="prev-value"></div>
    <div class="ui-slider" data-type="ui-slider"></div>
    <div class="value" data-type="next-value"></div>
</div>

Classes .from and .to can be anything, they just example.

Item example:

<!-- item -->
<div class="list-item box">
    <span class="from">$35</span> - <span class="to">$125</span>
</div>

[kurtzaugg]

Hmm, I changed the code and the file, but it still doesn't work. It works somehow but not correctly... I uploaded the files to a test-location: http://promptnet.ch/Produkttabelle.htm

[1rosehip]

What exactly is wrong in your demo?

[kurtzaugg]

e.g. leave the first slider on 58 and set the second slider to 115. There is at least one row which has 60-65 but this row is hidden.

[1rosehip]

I think I've found the issue. Please download the script and check it again.

[kurtzaugg]

Which script?

[1rosehip]

https://raw.githubusercontent.com/no81no/jplist/master/dist/js/jplist.core.min.js

[kurtzaugg]

Thank you very much!!!

[1rosehip]

You're welcome 👍 Please close this issue if all is well.