Javascript jQuery滑块和更改div容器内容

好的，这是我到目前为止得到的：

首先，到这里来看看我想描述什么：

我想做的是： 有人去了上面的网站，想知道他们可以用厨房里的东西做什么样的三明治。因此，从上面的示例中，他们将选择面包片数，选择午餐肉片数，然后单击提交按钮

至少对我来说，让这件事变得棘手的是，我希望它是随机的，而这正是我遇到障碍的地方。我不希望同一个用户一次又一次地吃同样的三明治，因为即使他们可能有相同的成分，他们也可能想要一种新的最终产品选择。因此，当他们选择有多少片面包和午餐肉，而不是“内容”容器说“初始页面加载内容将转到此处…”时，它会说“有了这些成分，你可以制作这个三明治，还有这个三明治”

那么，经过这么多的漫无边际，这可能吗

---

我一辈子都搞不清楚如何将代码粘贴到这个地方，这很棘手，也很抱歉。

好的，我写了一个代码示例，让您看看这是否适合您

我使用了一个JqueryUI滑块组件，它接受一个范围，并且每次用户来到页面时都会随机为他选择一个范围。尝试运行该示例几次，以确保这些值几乎不会发生

首先，为范围生成随机数：

var minVal = 100;
var maxVal = 1000;
var randomMin = Math.random() * 400 + minVal;
var randomMax = Math.random()*400 + (maxVal - minVal);

然后编写滑块更改事件侦听器：

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: minVal,
      max: maxVal,
      values: [randomMin, randomMax],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

---

以下是示例的完整URL:

您提到了几个问题。1） 对于页面的每个请求，您需要不同的组合。它应该是完全随机的吗？2） 您想告诉用户他有哪种组合选择。我说得对吗？对于第二部分，您需要有自己的算法，对吗？或者你只是想看看用户选择的数字？先把它弄清楚。@Ambodi 1。是的，如果可能的话，我希望它是随机的，这样每个用户都会得到一个不同的三明治。至于你问题的第二部分，我还不知道，不知道哪一个工作得最好，对编码来说是新手，所以还不知道哪一个最容易实现。我想，只要读取他们在滑块上选择的数字，并从某个地方提取不同的组合，就会更容易。如果这是可能的话。@Ambodi基本上是这样的：，但我不想显示图像，而是希望它根据滑块标准显示不同的食谱。为您写下我的答案。希望一切顺利