Django如何获取价格区间滑块值实现商品价格筛选

整个功能在你现有代码基础上修改即可，不需要额外引入复杂依赖：

1. 修改后端视图筛选逻辑 #

你当前视图是直接查询全量商品，只需要增加GET参数接收和过滤逻辑即可。用GET传参的好处是筛选条件会保留在URL中，支持分享、浏览器回退等操作。
首先在视图文件顶部引入需要的聚合函数：

from django.db.models import Max

然后修改商品列表视图代码：

def produits(request):
    # 原有全量商品查询
    prod = Product.objects.all()

    # 接收前端传递的价格区间参数
    min_price = request.GET.get('min_price')
    max_price = request.GET.get('max_price')

    # 参数合法性校验+执行过滤
    if min_price and max_price:
        try:
            min_p = float(min_price)
            max_p = float(max_price)
            # Django ORM双下划线语法：gte为大于等于，lte为小于等于，直接匹配价格区间
            prod = prod.filter(prix__gte=min_p, prix__lte=max_p)
        except ValueError:
            # 传入非数字参数时直接忽略，返回全量商品避免报错
            pass

    # 计算全站商品最高价格，作为滑块的最大值上限
    max_price_all = Product.objects.aggregate(max_p=Max('prix'))['max_p'] or 1000
    # 保留你原有分类、计数逻辑不变
    categ = [] # 填入你原有的分类查询代码
    nb = 0 # 填入你原有的商品计数代码

    context = {
        'prod': prod,
        'categ': categ,
        'nb': nb,
        # 把当前选中的价格、全站价格上限传回前端，用于滑块初始化
        'current_min': float(min_price) if min_price else 0,
        'current_max': float(max_price) if max_price else max_price_all,
        'max_price_all': max_price_all
    }
    return render(request, 'produits.html', context)

2. 修改前端模板交互逻辑 #

你现有模板已经写好了滑块容器和价格显示输入框，只需要补全滑块初始化、取值、参数传递的逻辑即可。
首先替换模板里的价格筛选区块代码：

<div class="mb-4">
  <h3 class="mb-3 h6 text-uppercase text-black d-block">Filter by Price</h3>
  <div id="slider-range" class="border-primary"></div>
  <input type="text" name="PRICE" id="amount" class="form-control border-0 pl-0 bg-white" disabled />
  <button id="price-submit" class="btn btn-sm btn-primary mt-2 w-100">按价格筛选</button>
</div>

你当前模板的滑块样式是jQuery UI的默认样式，大概率已经引入了jQuery和jQuery UI资源，直接在你引入cart.js的script标签前加入下面的JS代码即可；如果没引入jQuery UI，先把对应静态资源引入后再使用。

$(function () {
  // 读取后端传回的初始价格值
  const initMin = parseFloat("{{ current_min }}");
  const initMax = parseFloat("{{ current_max }}");
  const sliderMax = parseFloat("{{ max_price_all }}");

  // 初始化价格区间滑块
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: sliderMax,
    values: [initMin, initMax],
    slide: function (event, ui) {
      // 滑块拖动时实时更新输入框的价格显示
      $("#amount").val(`${ui.values[0]}元 - ${ui.values[1]}元`);
    }
  });

  // 页面首次加载时显示默认价格区间
  $("#amount").val(`${$("#slider-range").slider("values", 0)}元 - ${$("#slider-range").slider("values", 1)}元`);

  // 点击筛选按钮时跳转，带上价格参数
  $("#price-submit").click(function () {
    const selectMin = $("#slider-range").slider("values", 0);
    const selectMax = $("#slider-range").slider("values", 1);
    // 构造新URL，自动保留已有的其他筛选参数（比如分类、分页）
    const targetUrl = new URL(window.location.href);
    targetUrl.searchParams.set("min_price", selectMin);
    targetUrl.searchParams.set("max_price", selectMax);
    window.location.href = targetUrl.toString();
  });
});

如果不需要点击按钮，想要滑块拖动松开后自动筛选，把按钮点击的逻辑直接放到滑块的stop回调函数里即可，不需要额外加按钮。

3. 可选优化 #

• 如果要做无刷新筛选，把上面的页面跳转逻辑改成发AJAX请求，后端返回筛选后的商品列表HTML片段，前端直接替换商品列表的DOM即可，不需要整页刷新。
• 分类、尺寸、颜色等其他筛选项也可以用同样的GET参数传递方式，和价格筛选组合使用，URLSearchParams会自动拼接多个参数，不会互相覆盖。

内容的提问来源于stack exchange，提问作者Deal