can't set linear-gradient using jquery-CodePudding

I wanted to set background color using jquery. it's working fine with red color but when I try to use linear-gradient it's not working.

<input id="slider" type="range" min="100" value="100" max="5000" step="100">


<div id="slider_value">

</div>

<style>
 #slider_value {
   height:100px;
   width:600px;
   /*   background: linear-gradient(to right, black 0%, black 80%, rgb(228, 229, 230) 80%, rgb(228, 229, 230)) !important; */
 }
</style>

This jquery code not working

<script>
 $(document).on('input', '#slider', function() {

 $backgrnd = "linear-gradient(to right, black 0%, black 80%, rgb(228, 229, 230) 80%, rgb(228, 229, 230)) !important";


 $('#slider_value').html($backgrnd);

$('#slider_value').css("background" , "linear-gradient(to right, black 0%, black 80%, rgb(228, 229, 230) 80%, rgb(228, 229, 230)) !important");

});
</script>

But when I use this code it's working

<script>
 $(document).on('input', '#slider', function() {

    $backgrnd = "red";
    $('#slider_value').html($backgrnd);
    $('#slider_value').css("background" , $backgrnd);

 });
<script>

CodePudding user response：

You have to remove the important property for this to work. See below

$(document).on('input', '#slider', function() {
    $backgrnd = "linear-gradient(to right, black 0%, black 80%, rgb(228, 229, 230) 80%, rgb(228, 229, 230))";

    $('#slider_value').html($backgrnd);
    $('#slider_value').css("background" , $backgrnd);
});

#slider_value {
    height:100px;
    width:600px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider" type="range" min="100" value="100" max="5000" step="100">
<div id="slider_value"></div>