先上範例

codepen

你這篇有幾個問題

1 .

這段 code 是用了 jquery ui 的 東西

2 .

請問一下 第一次遇到這種
一個input裡面有兩個值的狀況

你貼的這個

其實只是用來顯示

$205 - $300

這個字串的 input

range 的真正值不是在這裡

3 .

下面資料也可以同步更新是如何做到的

根據 jquery ui doc

有個 slide event

他可以

Triggered on every mouse move during slide

所以也就可以達到你說的同步更新

這樣的操作

4 .

因為我現在都只想的到一個form讀取input值然後submit後得到結果

然後他並沒有發出任何的 http request

所以並不用什麼 form submit

他只是變更 html 而已

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

每次變更 slider 的值

都會呼叫上面他的這個 function

然後真要發送 http request

也不是只有 form

ajax 可以去了解一下