Untitled

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <script src="distribute/nouislider.js"></script>
        <link href="distribute/nouislider.css" rel="stylesheet"/>
    </head>
    <body>

<div class="range-slider">
                        <div class="d-flex flex-row flex-wrap justify-content-between align-items-center item-spaces">
                            <p><label for="maxAuctions"><?php te('hp price number of active auctions'); ?><span class="bs-icon bs-icon-small bs-info" data-toggle="tooltip" data-placement="right" title="<?php te('hp price number of active auctions tooltip'); ?>"></span></label></p>
                            <div class="input-wrapper">
                                <input id="minAuctions" class="form-control hidden-input" type="text" name="pf" value="0" placeholder="od"/>
                                <input id="maxAuctions" class="form-control" type="text" name="pt" value="200"  placeholder="do"/>
                            </div>
                        </div>

                        <div id="auctions-slider"></div>
                    </div>
    <script>
        var slider = document.getElementById('auctions-slider');

        noUiSlider.create(slider, {
            start: [0, 250],
            behaviour: 'none',
            margin: 0,
            connect: true,
            range: {
                'min': 0,
                '15%': 100,
                '30%': 500,
                '50%': 1000,
                '75%': 5000,
                'max': 10000
            },
            pips: {
                mode: 'steps',
                density: 5
            }
        });
    </script>

    </body>
</html>