when i drag my slider it takes a little while(0.5s approx) to move from one place to another and my values also does not get changed smoothly. what can i do?

MY HTML

                <div class="list-group three-list">
                    <h3>Price</h3>
                    <input type="hidden" id="hidden_minimum_price" value="100" />
                    <input type="hidden" id="hidden_maximum_price" value="50000" />
                    <p id="price_show">100 - 50000</p>
                    <div id="price_range"></div>
                </div>

MY JS

            $(document).ready(function() {
            $('#price_range').slider({
            range: true,
            min: 100,
            max: 50000,
            values: [100, 50000],
            step: 100,
            slide: function(event, ui) {
                $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
                $('#hidden_minimum_price').val(ui.values[0]);
                $('#hidden_maximum_price').val(ui.values[1]);
                filter_data();
            }
        });