CODEWITHSUNDEEP
jquerycsshtmlsliderrange
Sammi
Sammi

Reputation: 261

Use input textbox to control input range slider with background color

I have followed one of the questions on stackoverflow and create a range slider. However, I would like it to be interactive with the textbox such that when I type in a number, the slider will change and when I slide the slider and relative value will be shown in the textbox.

Here is the solution that I am following: Link

And below is my version:

Would anyone please help and give me some suggestion please. Thank you so much!

$('#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>

Upvotes: 2

Views: 2956

Answers (2)

Falguni Prajapati
Falguni Prajapati

Reputation: 129

I think this plugin may help to get output what you want. 

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

Upvotes: 0

chintuyadavsara
chintuyadavsara

Reputation: 1569

Pure CSS will work better in this case. Here is the full code which might help you solve.

$('#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>

Upvotes: 3

Related Questions