要使用CSS制作滑块效果，可以通过以下步骤实现：
<input>元素来创建滑块，例如： <input type="range" min="1" max="100" value="50" class="slider">其中，type="range"表示创建的是滑块元素，min和max属性分别表示滑块的最小值和最大值，value属性表示滑块的默认值，class="slider"用于指定CSS样式。
::-webkit-slider-thumb和::-moz-range-thumb选择器来设置滑块的样式。例如：.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
background-color: #4CAF50;
cursor: pointer;
}其中，-webkit-appearance: none;和appearance: none;用于隐藏默认的滑块样式，width和height用于设置滑块的大小，background-color用于设置滑块的颜色，cursor: pointer;用于设置鼠标指针的样式为手型。
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
background-color: #ddd;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #4CAF50;
cursor: pointer;
}其中，width和height用于设置滑块轨道的大小，background-color用于设置滑块轨道的颜色，opacity用于设置滑块轨道的透明度，-webkit-transition: .2s;和transition: opacity .2s;用于设置滑块轨道的渐变效果，outline: none;用于去除滑块轨道的边框，:hover伪类用于设置鼠标悬停时的样式。
综上所述，使用CSS制作滑块效果可以通过设置<input>元素和相关的CSS样式来实现。关键词包括<input type="range">、::-webkit-slider-thumb、::-moz-range-thumb、width、height、background-color、cursor、-webkit-transition、transition、opacity、outline、:hover等。