Question

我遵循了关于stackoverflow的问题之一，并创建了一个范围滑块。但是，我希望它与文本框具有交互性，这样当我输入数字时，滑块将发生变化，而当我滑动滑块时，相对值将显示在文本框中。

这是我关注的解决方案：Link

以下是我的版本：

请任何人帮忙，请给我一些建议。非常感谢！

$('#slide-range').change(function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #A90F00), '
                + 'color-stop(' + val + ', #E2E2E2)'
                + ')'
                );


    });

#slide-range{
        outline-style:none;
        box-shadow:none;
        border-color:transparent;
        -webkit-appearance: none;
        -moz-apperance: none;
        border-radius: 8px;
        width: 334px;
        height: 8px;
        background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(1, #A90F00),
            color-stop(1, #E2E2E2)
        );
        margin-bottom: 30px;
    }
#slide-range::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        background-color: #fff;
        height: 20px;
        width: 20px;
        border-radius: 20px;
        box-shadow:0 0 5px rgba(0,0,0,0.5);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slide-range" type="range" min="0" max="100" step="1" value="100">
<div class="input-amount">
  <input id="input-Amount" name="price" value="100">
  <span class="unit">$</span>
</div>

Answer 1

在这种情况下，纯CSS会更好地工作。这是完整的代码，可以帮助您解决。

$('#slide-range').on('input',function () {
  
  var newVal = $(this).val();

  $("#input-Amount").val(newVal);
});
$('#input-Amount').on('input', function(){
  //console.log($(this).val())
  $('#slide-range').val($(this).val())
});

input[type="range"]::-moz-range-progress {
  height:10px;
  border-radius:8px;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(1, #A90F00),
    color-stop(1, #E2E2E2)
  );
  background-color: #43e5f7; 
  outline:none;
  border:0;
}
input[type="range"]::-moz-range-track {  
  height:10px;
  border-radius:8px;
  background-color: #D3D3D3;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(1, #D3D3D3),
    color-stop(1, #D3D3D3)
  );
  outline:none;
  border:0;
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slide-range" type="range" min="0" max="100" step="1" value="100">
<div class="input-amount">
  <input id="input-Amount" name="price" value="100">
  <span class="unit">$</span>
</div>
</body>
</html>

Answer 2

我认为该插件可能有助于获得所需的输出。

 <!DOCTYPE html>
    <html>
    <head>
    <title>slideControl.js jQuery Plugin</title>
    <link rel="stylesheet" type="text/css" href="slideControl.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jqueryscript.net/demo/Cool-SliderControl-Plugin/jquery.slideControl.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $('.slideControl').slideControl();

    });
    </script>
    </head>
    <body>
        <div class="content">
            <ul class="clearfix">
                <li><label>Foo: </label><input type="text" value="6.0" class="slideControl" maxlength="3" /></li>
                <li><label>Bar: </label><input type="text" value="4.0" class="slideControl" maxlength="3" /></li>
                <li><label>FooBar: </label><input type="text" value="9.0" class="slideControl" maxlength="3" /></li>
            </ul>
        </div>
    </body>
    </html>

使用输入文本框来控制背景色的输入范围滑块

2 个答案: