问通过单击数字更改div背景

EN

input[type=radio],input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
.slider_wrap{
  max-width:600px;
  margin: 0 auto;
  text-align:center;
  font-size: 33px;
}
label:hover{
  cursor:pointer;
  color:#e26a63;
}

.slider{
  height: 200px;
}



#button-1:checked ~ .slider {
  background:blue;
}
#button-1:checked ~ #label1 {
color:#e26a63;
}

#button-2:checked ~ .slider {
   background: yellow;
}
#button-2:checked ~ #label2 {
color:#e26a63;
}

#button-3:checked ~ .slider {
   background: orange;
}
#button-3:checked ~ #label3 {
color:#e26a63;
}

#button-4:checked ~ .slider {
   background: cyan;
}
#button-4:checked ~ #label4 {
color:#e26a63;
}
#button-5:checked ~ .slider {
   background: black;
}
#button-5:checked ~ #label5 {
color:#e26a63;
}
#button-6:checked ~ .slider {
   background: grey;
}
#button-6:checked ~ #label6 {
color:#e26a63;
}
#button-7:checked ~ .slider {
   background: green;
}
#button-7:checked ~ #label7 {
color:#e26a63;
}
#button-8:checked ~ .slider {
   background: brown;
}
#button-8:checked ~ #label8 {
color:#e26a63;
}
#button-9:checked ~ .slider {
   background: red;
}
#button-9:checked ~ #label9 {
color:#e26a63;
}
#button-10:checked ~ .slider {
   background: green;
}
#button-10:checked ~ #label10 {
color:#e26a63;
}

<div class="slider_wrap">

<input value="10" type="checkbox" id="button-10" name="controls"  checked>
<input value="0" type="radio" id="button-1" name="controls">
<input value="1" type="radio" id="button-2" name="controls">
<input value="2" type="radio" id="button-3" name="controls">
<input value="3" type="radio" id="button-4" name="controls">
<input value="4" type="radio" id="button-5" name="controls">
<input value="5" type="radio" id="button-6" name="controls">
<input value="6" type="radio" id="button-7" name="controls">
<input value="7" type="radio" id="button-8" name="controls">
<input value="8" type="radio" id="button-9" name="controls">
<input value="9" type="radio" id="button-10" name="controls">

  
<div class="slider"></div>

<label id="label10" for="button-10"></label>
<label for="button-1" id="label1">1</label>
<label for="button-2" id="label2" >2</label>
<label for="button-3" id="label3">3</label>
<label for="button-4" id="label4">4</label>
<label for="button-5" id="label5">5</label>
<label for="button-6" id="label6">6</label>
<label for="button-7" id="label7">7</label>
<label for="button-8" id="label8">8</label>
<label for="button-9" id="label9">9</label>
<label for="button-10" id="label10">10</label>

  

</div>