如何一起制作输入和滑块答案

【问题标题】：How to make an input and a slider together如何一起制作输入和滑块
【发布时间】：2013-05-18 04:54:04
【问题描述】：

我正在尝试CSS 3D 变换，我正在尝试制作滑块来处理变换。我想出了editor of Three.js，我喜欢它如何处理每个对象的位置、旋转和缩放的想法。它同时是一个输入和一个滑块，或者我只是假设。

即使在检查了源代码之后，我也没有弄清楚它是如何工作的，我想给我一个实现相同功能的代码 sn-p。具体来说，要有一个输入值，只需向右/向左滑动该值，对象就会移动或手动给出一个值。

注意：我对转换的功能不感兴趣，只对如何完成这样的输入滑块感兴趣。

提前谢谢你。

【问题讨论】：

标签： javascript jquery html input three.js

【解决方案1】：

inputs 位于div 中，其样式看起来像标签：没有边框，没有背景。 inputs 上有一种样式，可以将光标更改为滑块光标 (cursor:col-resize)。

inputs 上可能有一个onmousedown/onmouseup 侦听器，然后是一个onmousemove，用于在鼠标按下时获取鼠标位置。我发现在body 上放置一个全局onmousemove 处理程序效果最好。如果您将onmousemove 事件放在一个小元素上，那么当鼠标不再位于该元素上时，您将不会收到该事件。正如您在 three.js 编辑器中看到的那样，您可以 mousedown 然后将鼠标移动到页面上的任意位置。

您可能需要使用event.preventDefault() 来确保onmousedown 不会触发对输入元素的关注。

【讨论】：

感谢您的回答，但其中大多数很容易从开发人员工具中找出。对我来说困难的部分是使用 javascript 切换滑块和输入。我用谷歌搜索了类似的东西，但找不到任何可行的例子。
如果这“很容易弄清楚” 那么你为什么不制作你自己的代码示例呢？我已经概述了脚本的外观，您需要做的就是编写代码。
@giokokos 既然熟悉开发者工具，何不看看 Three.js 编辑器是如何实现的（它的复用性很强）。您感兴趣的部分位于第 605 行的 threejs.org/editor/js/UI.js UI.Number 和第 768 行的 UI.Integer
感谢@thefrontender。我会看看它并尝试制作一个工作示例并将其发布在这里作为答案。

【解决方案2】：

这是一个（非常）简单的 jQuery 插件，可以模拟您所追求的内容（对于整数）。我将把它扩展为处理浮点数作为你的练习。

JSFiddle 为 http://jsfiddle.net/yRmHS/3/ 处的光标添加了 CSS

jQuery.fn.slidingInput = function (opts) {

    var defaults = {
        step: 1,        // Increment value
        min: 0,         // Minimum value
        max: 100,       // Maximum value
        tolerance: 2    // Mouse movement allowed within a simple click
    };

    return this.each(function () {
        var $el = $(this),
            options = $.extend({}, defaults, opts, this),
            distance = 0,
            initialValue = 0;

        function mouseDown () {
            distance = 0;
            initialValue = parseInt($el.val(), 10);

            $(document).on('mousemove', mouseMove).on('mouseup', mouseUp);

            return false;
        }

        function mouseMove (e) {
            var currentValue = parseInt($el.val(), 10),
                event = e.originalEvent,
                movementX = event.movementX || event.webkitMovementX || event.mozMovementX || 0,
                movementY = event.movementY || event.webkitMovementY || event.mozMovementY || 0;

            distance += (movementX - movementY) * options.step;

            $el.val(Math.min(options.max, Math.max(initialValue + distance, options.min)));
        }

        function mouseUp () {
            $(document).off('mousemove mouseup');

            if (Math.abs(distance) < options.tolerance) {
                $el.focus();
            }
        }

        $el.on('mousedown', mouseDown);
    });
};

// How to use it
$(function () {
    // Initialise plugin
    // HTML sample: <input type="number" class="slidable" step="2" value="50" min="0" max="100" />
    $('.slidable').slidingInput();

    // Accepts options object that override defaults, but step/min/max on input override options
    /*
        $('.slidable').slidingInput({
            step: 1,
            min: 0,
            max: 100,
            tolerance: 2
        });
    */
});

【讨论】：

谢谢，这正是我要找的！