Untitled

void OnGUI(){
        GUI.skin=myskin;
        GUILayout.BeginVertical ();
        GUILayout.Box ("sliderValue : " +  Mathf.RoundToInt(sliderValue));

        sliderValue = GUILayout.HorizontalSlider(sliderValue ,1.0f, maxSliderValue);
        if (sliderValue == 1) {


                }

    }

float sliderValue;
float maxSliderValue = 2.0f;
public GUIStyle backgroundStyle;
public GUIStyle thumbStyle;
public Texture2D tex, tex2, thumbTex;

void OnGUI()
{
    GUILayout.BeginVertical ();
    GUILayout.Box ("sliderValue : " +  Mathf.RoundToInt(sliderValue));

    thumbStyle.normal.background = thumbTex;
    thumbStyle.fixedWidth = 20;
    thumbStyle.fixedHeight = 20;

    if (Mathf.RoundToInt(sliderValue) == 1)
        backgroundStyle.normal.background = tex;
    else
        backgroundStyle.normal.background = tex2;

    sliderValue = GUILayout.HorizontalSlider(sliderValue ,1.0f, maxSliderValue, backgroundStyle, thumbStyle);
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>


.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    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: 75px;
    height: 25px;
    cursor: pointer;
    background-image:url(images/slider-bg-.jpg);
    background-repeat:no-repeat;
}


.slider::-moz-range-thumb {
    width: 75px;
    height: 25px;
    cursor: pointer;
    background-image:url(images/slider-bg-.jpg);
    background-repeat:no-repeat;
}


.valuecount::-webkit-slider-thumb {
  -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 25px;
    cursor: pointer;
    background-image:url(images/slider-bg-.jpg);
    background-repeat:no-repeat;
}

.valuecount::-moz-range-thumb {
    width: 20px;
    height: 25px;
    cursor: pointer;
    background-image:url(images/slider-bg-.jpg);
    background-repeat:no-repeat;
}


.valuecount{
height: 30px;
    -webkit-transition: .2s;
    transition: opacity .2s;
    overflow: hidden;
    clear: both;
    width:100%;

}

</style>
</head>
<body>
<h1>Custom Range Slider</h1>
<p>Drag the slider to display the current value.</p>

<div class="slidecontainer">
  <input type="range" list="tickmarks" class="valuecount">
  <datalist id="tickmarks">
    <option value="0" label="0%">
    <option value="10">
    <option value="20">
    <option value="30">
    <option value="40">
    <option value="50" label="50%">
    <option value="60">
    <option value="70">
    <option value="80">
    <option value="90">
    <option value="100" label="100%">
  </datalist>
</div>
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>
</body>
</html>