Updating slider css

Author: pratikabu

src/options/options.html

@@ -67,7 +67,7 @@
 						<div class="settinggroup">
 							<div class="settinglabel">Scrolling Speed :</div>
 							<div class="settingoptions">
-								<input type="range" id="scrollSpeedSliderId" min="100" max="2600" step="100" />
+								<input type="range" id="scrollSpeedSliderId" class="slider" min="100" max="2600" step="100" />
 								<span id="currentSpeed" style="font-size: 11px; margin-left: 10px; vertical-align: middle;"></span>
 							</div>
 						</div>
@@ -111,7 +111,7 @@
 					<div class="advancedProp settinggroup">
 						<div class="settinglabel">Transparency :</div>
 						<div class="settingoptions">
-							<input type="range" id="transparencySliderId" min="0.1" max="0.9" step="0.01" />
+							<input type="range" id="transparencySliderId" class="slider" min="0.1" max="0.9" step="0.01" />
 							<img class="blackAndWhiteCSS" style="vertical-align: middle; margin-left: 20px;" id="transparencyImgId" src="../icons/pratikabu-stt-32-1.png" />
 						</div>
 					</div>

src/options/res/options.css

@@ -128,11 +128,6 @@ a.mylink {
 	display: none;
 } */
 
-[class^=slider] {
-	display: inline-block;
-	vertical-align: middle;
-}
-
 body {
 	background-color: rgba(155, 155, 155, 0.2);
 	margin: 79.5px 0 0 0; /* This margin is the height of the header section */
@@ -213,6 +208,13 @@ hr {
 	text-decoration: none;
 }
 
+.slider {
+	width: 300px;
+	display: inline-block;
+	vertical-align: middle;
+}
+
+
 @media screen and (max-width: 750px) {
 	.mainContentWidth {
 		width: 600px;
@@ -222,7 +224,7 @@ hr {
 		width: 30%;
 	}
 
-	#scrollSpeedSliderId-slider {
+	.slider {
 		width: 280px;
 	}
 
@@ -257,18 +259,14 @@ hr {
 		margin-top: 10px;
 	}
 
-	#scrollSpeedSliderId-slider {
+	.slider {
 		width: 140px;
 	}
 
 	#currentSpeed {
 		margin-left: 0px !important;
 	}
 
-	#transparencySliderId-slider {
-		width: 190px;
-	}
-
 	#transparencyImgId {
 		margin-left: 0px !important;
 	}