在html页面中编程滚动条（如音量控制），使用php/javasctipt/ajax技术生成更新调用

在Linux/Apache服务器上托管的html主页中，我想实现一个滚动条，在更新时生成对服务器的ajax/PHP调用

我所说的滚动条是指在两个值min和max之间具有滑动头的控制器，类似于windows中的音量控制条

您可以建议一个起点，或者直接到一个已经运行的版本吗？

您可以使用jquery滑块： 演示：

对于渐变背景：

JS:

从绿色到红色CSS：

.checked {
        background: rgb(118, 206, 99);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(118, 206, 99, 1)), color-stop(100%, rgba(255, 0, 0, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to right, rgba(118, 206, 99, 1) 0%, rgba(255, 0, 0, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#76ce63', endColorstr='#ff0000', GradientType=1);
        /* IE6-9 */
        ;
    }

从红色到绿色css：

        .checked {
        background: rgb(255, 0, 0);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(23, 130, 0, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#178200', GradientType=1);
        /* IE6-9 */
    }

HTML:

---

您可以在这里了解更多信息：它提供了幻灯片上的回调，开始事件。他们会对你有所帮助。

谢谢你，卡姆莱什，这正是我想要的。有没有一种方法可以用颜色渐变，从红色变为绿色。我想出了如何改变静态颜色。是的，这是可能的。您只需要将相关样式指定给类。代码已更新。请检查谢谢Kamlesh，但此代码使选中面变为绿色，未选中面变为白色，相反，我希望有一个从红色到绿色的颜色渐变的静态条，就像一个双色彩虹，头部的运动不应影响颜色。它是一个

滑块
而不是
滚动条
        .checked {
        background: rgb(255, 0, 0);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(23, 130, 0, 1)));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* IE10+ */
        background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(23, 130, 0, 1) 100%);
        /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#178200', GradientType=1);
        /* IE6-9 */
    }

        <div class="checked"></div>