Buttons Range Filter Control

This control has button layout and used to filter numeric content according to the selected button data attributes. The content to filter is defined by CSS selector.

See the Pen jPList Buttons Range Filter Control by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Buttons range filter control is defined by required data-jplist-control="buttons-range-filter" data attribute. The data-group attribute defines group of elements that should be filtered. The full list of data attributes can be found here.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />
                
<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-selected="true"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".view"
     data-group="group1"
     data-name="name1"
     data-from="20"
     data-to="200">
Views: 20 - 200
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".price"
     data-group="group1"
     data-name="name1"
     data-from="30">
Prices: 30+
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="price">10</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">20</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="view">121</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Top and bottom panels

Button path filter controls can be placed in both top and bottom panels for the better user experience. In this case data-name attribute with the same value should be added to all controls. All other data attributes should also have the same values:

<!-- TOP PANEL CONTROLS -->
<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-selected="true"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".view"
     data-group="group1"
     data-name="name1"
     data-from="20"
     data-to="200">
Views: 20 - 200
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".price"
     data-group="group1"
     data-name="name1"
     data-from="30">
Prices: 30+
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="price">10</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">20</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="view">121</div>
        ....
    </div>

</div>

<!-- BOTTOM PANEL CONTROLS -->
<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-selected="true"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".view"
     data-group="group1"
     data-name="name1"
     data-from="20"
     data-to="200">
Views: 20 - 200
</button>

<button
     data-jplist-control="buttons-range-filter"
     data-path=".price"
     data-group="group1"
     data-name="name1"
     data-from="30">
Prices: 30+
</button>

Jump to top

data-jump data attribute can be used to scroll page to the specified location when user clicks a button. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.

<!-- filter all items that have .title class -->
<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-jump="top"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

Deep Linking

Deep links can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-id="like1"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">100</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">200</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">150</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        deepLinking: true
    });
</script>

Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<button
     data-jplist-control="buttons-range-filter"
     data-path=".likes"
     data-group="group1"
     data-name="name1"
     data-id="like1"
     data-from="50"
     data-to="100">
Likes: 50 - 100
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">100</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">200</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">150</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'jplist'
    });
</script>

Data Attributes

The full list of control data attributes.

Name	Description	Values
`data-jplist-control`	Defines buttons path filter control.	"buttons-range-filter"
`data-group`	Defines group of items that should be filtered. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute.	any text value
`data-path`	CSS selector that defines the HTML element that should be filtered	"default" keyword for the initial value or any CSS selector
`data-selected`	Defines if a button is selected.	"true" or "false"
`data-from`	Minimal range value.	numeric value
`data-to`	Maximal range value.	numeric value
`data-name`	The data-name attribute is used to identify the same controls in different panels or the group of buttons in radio mode. Different controls should have different data-name attributes. By default, data-name attribute has default value.	any text value
`data-jump`	This data attribute can be used to scroll page to the specified location when user selects an option. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.	top keyword or any CSS selector
`data-id`	This attribute is used for deep linking.	any text value that may contain letters, digits, underscores or dashes
`data-or`	Defines a group of controls that should be filtered though the "OR" logic	any text value, for example data-or="bags"