代码之家 › 专栏 › 技术社区 › Sammi

使用“输入文本框”以背景色控制输入范围滑块

range slider html5 css jquery

0

Sammi · 技术社区 · 6 年前

我遵循了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>

2 回复 | 直到 6 年前

1

2

chintuyadavsara 6 年前

在这种情况下,纯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>

2

0

Falguni Prajapati 6 年前

 <!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>