stackoom
  简体   繁体   中英

Javascript change background color in select option with range slider

 原文  2017-09-15 14:23:29  1   1    javascript/ jquery

Question

I have a script which make slider and then change value of select but I would also like to change background color of this selected option. please help me ! I would like to make the blue color on active or focus state option i dont know change to other color. every value of select must have other background color 

 $(function() { var select = $("#minbeds"); var slider = $("<br><div id='slider'></div>").insertAfter(select).slider({ min: 1, max: 10, range: "min", value: select[0].selectedIndex + 1, slide: function(event, ui) { select[0].selectedIndex = ui.value - 1; } }); $("#minbeds").on("change", function() { slider.slider("value", this.selectedIndex + 1); }); }); 
 .selecttodiv { display: inline; height: 2.3em; -webkit-appearance: none; -moz-appearance: none; border: none; margin-top: 15px; width: 900px; } .selecttodiv option { display: inline-block; width: 2.1em; height: 2.1em; border-radius: 460%; text-align: center; border: 1px solid black; margin-left: 25px; } #slider { margin-left: 10px; margin-top: 100px; background: linear-gradient(to right, #FF5858 0%, #FF5858 30%, #FF9363 30%, #FF9363 80%, #79DB77 80%, #79DB77 100%); width: 800px; height: 0.4em; } #slider>div:nth-child(1) { /* background: yellow; */ /* background: linear-gradient(to right, red 0%, red 33%, orange 33%, orange 66%, green 66%, green 100%); */ background: transparent; } #slider>span:nth-child(2) { top: -.8em; border-radius: 50px; width: 30px; height: 30px; } option:active { background: red; } 
 <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Slider bound to select</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- <link rel="stylesheet" href="/resources/demos/style.css"> --> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <form id="reservation"> <select class="selecttodiv" name="minbeds" id="minbeds" size="2"> <option class="red" selected >1</option> <option class="red">2</option> <option class="red">3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> </form> </body> </html>

1 answers

solution1
 0  2017-09-15 15:24:32

try this, I implemented it on five points, you can extend as you like 

<div class="cont" style="width:400px;">

    <progress id="MyTicketsProgress" class="progress-bar" min="1" max="100" value="0"></progress>
    <div ID="L0" class="first border-change ProgressSpan" onclick="record(this,0)">
        <div class="ProgressTitle">0%</div>
    </div>
    <div ID="L25" class="second ProgressSpan" onclick="record(this,25)">
        <div class="ProgressTitle">25%</div>
    </div>
    <div ID="L50" class="third ProgressSpan" onclick="record(this,50)">
        <div class="ProgressTitle">50%</div>
    </div>
    <div ID="L75" class="fourth ProgressSpan" onclick="record(this,75)">
        <div class="ProgressTitle">75%</div>
    </div>
    <div ID="L100" class="fifth ProgressSpan" onclick="record(this,100)">
        <div class="ProgressTitle">100%</div>
    </div>
</div>

your js function: 

function record(_this, ProgressValue) {
if ($(_this).hasClass('first')) {
    $(_this).parent().find('.progress-bar').val('0');
    //$('#progress-bar').val('0');
    $(_this).nextAll().removeClass('border-change');
} else if ($(_this).hasClass('second')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('25');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');
} else if ($(_this).hasClass('third')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('50');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');        
} else if ($(_this).hasClass('fourth')) {
    $(_this).nextAll().removeClass('border-change');
    $(_this).parent().find('.progress-bar').val('75');
    $(_this).prevAll().addClass('border-change');
    $(_this).addClass('border-change');
} else {
    $(_this).parent().find('.progress-bar').val('100');
    $(_this).addClass('border-change');
    $(_this).prevAll().addClass('border-change');
}

}

for the css: 

.cont{


 height: 100%;  
  padding: 0;
  margin: 0 auto;
  position:relative;
  margin-top:-15px;

}
.progress-bar,.progress-bar[role]{
     -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  color: red; /*For progress color in IE*/
  height: 2px;
  margin: 0 auto;
  border: none;
  background-size: auto;

}

.progress-bar,                          /* Firefox  */ 
.progress-bar[role][aria-valuenow] {    /* Polyfill */
   background: #eae5e5 !important; /* !important is needed by the polyfill */
}

.progress-bar[aria-valuenow]:before  {
    background: red !important;
}

/* Polyfill */
.progress-bar[role]:after {
    background-image: none; /* removes default background from polyfill */

}


/* Polyfill - Safari */
.progress-bar:not([value])  {
    background-color: red !important;
    background-size: auto;  /* Needs to be in here for Safari */
}



.ProgressSpan {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  border: 4px solid #eae5e5;
  background:#eae5e5;
  position: absolute;
  left:0;
  top: 5px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}

.ps-not-clickable {
    cursor:initial !important;
}

.InclickableProgressSpan {
  cursor: default;  
}

.second{
  left: 25%;
}
.third{
  left: 50%;
}
.fourth{
  left: 75%;
}
.fifth{
  left: 100%;
}

.progress-bar::-webkit-progress-value{ /* Changes line color */
  background-color: red;
  transition: all 0.4s ease-in-out;


  /* For Safari 3.1 to 6.0 */
    -webkit-transition-property: width;
    -webkit-transition-duration: 0.4s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    /* Standard syntax */
    transition-property: width;
    transition-duration: 0.4s;
    transition-timing-function: linear;
    transition-delay: 0s;
}



.progress-bar::-moz-progress-bar {  /* Changes line color */
  background-color: red;
  transition: all 0.4s ease-in-out;
}


.progress-bar::-webkit-progress-bar{ /* Changes background color */
  background-color: #eae5e5;
}
.border-change{
  border-color:red;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.ProgressTitle {
padding-top:20px;color:#989797;font-size:0.5em;font-weight:bold;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Using range slider to change HSL background color with javascript Javascript: Change select background-color if option is selected javascript change select option background color drop down Change the background color of an <option> with JavaScript change the color of the range slider? Select an option to change a page's background color How to change the background color of a select option on hover How to change background color select 2 using javascript? Unable to change selected option background color | React Select Change option background color for individual select2 boxes?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM