cssの~の意味は何でしょうか？

cssの40行目の、（２）の、

input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue

このコードなんですけど、～この記号は何でしょうか？

よろしくお願いします。

css
1html {
2	font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
3	background-color: #242728;
4	-webkit-background-size: 5px 5px;
5	-moz-background-size: 5px 5px;
6	background-size: 5px 5px;
7	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 100%);
8	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 100%);
9	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 100%);
10	background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 100%);
11	background-image: linear-gradient(left, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 50%, transparent 100%);
12}
13
14p {
15    margin-top:5em;
16    text-align:center;   
17}
18
19p#title {
20    background-color:#ebf1f6;
21    border-radius:5px;
22}
23
24/*(1)*/
25input[type="range"]::-webkit-slider-thumb {
26    -webkit-appearance: none;
27    position: relative;
28    top: -1px;   
29    z-index: 1;
30    width: 11px;
31    height: 11px;
32    -webkit-border-radius: 40px;
33    -moz-border-radius: 40px;
34    border-radius: 40px;
35    background-image: -webkit-gradient(linear, left top, left bottom,
36        color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
37}
38
39/*(２)*/
40input[type="range"]:hover ~ #rangevalue,input[type="range"]:active ~ #rangevalue {
41	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
42	filter: alpha(opacity=100);
43	opacity: 1;
44	top: -70px;
45}
46
47/*(３)*/
48#rangevalue {
49    display:block;
50    color:#fff;
51    margin: 20px 0;
52    position:relative;
53    left:44.5%;
54    padding: 6px 12px;
55    border: 1px solid black;
56    -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
57	-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
58	box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0,0,0,0.4);
59	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222931), color-stop(100%,#181D21));
60
61	-webkit-border-radius: 20px;
62	-moz-border-radius: 20px;
63	border-radius: 20px;
64	width: 18px;
65	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
66	filter: alpha(opacity=0);
67	opacity: 0;
68
69	-webkit-transition: all 0.5s ease;
70	-moz-transition: all 0.5s ease;
71	-o-transition: all 0.5s ease;
72	-ms-transition: all 0.5s ease;
73	transition: all 0.5s ease;
74	top: -65px;
75}
76