How to create a slider diagram for a webpage?

Question

I would like to create a slider diagram like this for my webpage to display results:

How can I do this provided I have a maximum and minimum and the value I would like to plot? Prefereably, I would like to create it on-the-fly as I generate the result page using html/javascript/php.

EDIT: I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background.

Thank you for any answers!

score 0 · Answer 1 · answered Dec 18 '17 at 11:12

<html>
<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:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}
</style>
<body>



<div id="slidecontainer">
  
  
  
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

</body>
</html>

here you have a slider, enjoy!

Thank you for thw answer, however, I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background. — aqua, Dec 18 '17 at 12:08

score 0 · Answer 2 · answered Dec 18 '17 at 11:56

Since you want min-max value you need to create 2 range slider.

Check snippet below.

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
  <label>Min.</label>
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

<div class="range-slider">
 <label>Max.</label>
  <input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
  <span class="range-slider__value">0</span>
</div>

And If you want save space you can create 1 range slider with 2 control slider. Create a html for range slider then apply some jquery. Please check snippet below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"  media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>




      <div data-role="rangeslider">
        <label for="price-min">Price:</label>
        <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
        <label for="price-max">Price:</label>
        <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
      </div>

Then if you want to submit data to db you need to create form for this

Reference for range slider : https://www.w3schools.com/howto/howto_js_rangeslider.asp

I hope this answer can help.

Thank you for thw answer, however, I can see that my question was confusing. I do not want to create a slider (like an input to a form form) but an output diagram that has a vertical line at a fixed value with a colour gradient background. — aqua, Dec 18 '17 at 12:08

score 0 · Accepted Answer · answered Dec 18 '17 at 14:04

At last, I've got it. Just HTML and CSS (and PHP if I want to be able to dynamically assign the vertical line by using style="left:x%")

.grad {
 background: linear-gradient(to right, rgba(185, 74, 72, 0.75), rgba(192, 152, 83,0.25), rgba(70, 136, 71,0.75));
 width: 100px;
 height: 15px;
 border-radius: 24px;
 border-color: #446e9b;
 border-width: 1px;
}

.vertical-line {
 width: 1px;
 height: 15px;
 border-left: 2px solid #446e9b;
 position: relative;
 top: 0;
 background: none;
}

.tick {
 width: 1px;
 height: 5px;
 border-left: 1px solid #999999;
 position: relative;
 top: 0;
 background: none;
}

.bottom-tick {
 margin-top: -5px;
}

.top-tick{
  margin-top: -5px;
}

.inner10{
 z-index: 10;
}
.inner2{
 z-index: 2;
 left: 20%;
 margin-top: -15px;
}
.inner3{
 z-index: 3;
 left: 40%;
}
.inner4{
 z-index: 4;
 left: 60%;
}
.inner5{
 z-index: 5;
 left: 80%;
}
.inner6{
 z-index: 6;
 left: 20%;
}
.inner7{
 z-index: 7;
 left: 40%;
}
.inner8{
 z-index: 8;
 left: 60%;
}
.inner9{
 z-index: 9;
 left: 80%;
}

<div class="grad">
  <div class='vertical-line inner10' style="left:35%"></div>
  <div class='tick inner6 bottom-tick'></div>
  <div class='tick inner7 bottom-tick'></div>
  <div class='tick inner8 bottom-tick'></div>
  <div class='tick inner9 bottom-tick'></div>
  <div class='tick inner2'></div>
  <div class='tick inner3 top-tick'></div>
  <div class='tick inner4 top-tick'></div>
  <div class='tick inner5 top-tick'></div>
</div>

How to create a slider diagram for a webpage?

3 Answers3