Search code examples
jquerycssjquery-uiuislider

jquery range slider with dollar per hour value

I have used Jquery UI Slider for making range slider with value display in below image check this but i am not getting $ value before price and /hr after price like display in image

Check this
what i have tried using jquery UI Slider it is in below,please give me better solution for what i want,i have find stackoverflow question also but i didn't find solution

 $(document).ready(function () {
            var initialValues = [540, 1020],
            updateValue = function (ui) {
                var price = ui.value;
                $(ui.handle).attr('data-value', price);
            };

            $(".slider-range").slider({
                min: 0,
                max: 1440,
                step: 15,
                range: true,
                values: [540, 1020],
                create: function (event, ui) {
                    $.each(initialValues, function (i, v) {
                        updateValue({
                            value: v,
                            handle: $('.ui-slider-handle').eq(i)
                        });
                    });
                },
                slide: function (event, ui) {
                    updateValue(ui);
                }
            });
        });
*:focus{
outline:0;}
.time-range
{
  padding:0 20px;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;}

.ui-slider {
  position: relative;
  text-align: left;}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;}

.ui-slider .ui-slider-handle {
  background-color:#424453;
  width: 18px;
  height: 18px;}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background:#ff0000 50% 50% no-repeat;}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.7em;}

.ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: -24px;
    left: -20px;
    min-width: 60px;
    font-size:10px;
    height: 20px;
    color: #333;
    padding: 1px;
    text-align: center;}  

.ui-slider a:focus {
  outline:none;}

#slider-range {
  width: 95%;
  margin: 0px;}

.time-range {
  width: 100%;
  margin:10px 0px;
  display:block;}
  
.time-slider-label {
  display:inline-block;}  

.sliders_step1{
  width: auto;}

#time-range label{
    margin-top:10px;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>

Solution

  • Check this updated JQuery

     $(document).ready(function () {
            var initialValues = [540, 1020],
            updateValue = function (ui) {
                var price = ui.value;

                $(ui.handle).attr('data-value', '$' + price + '/hr');
            };

            $(".slider-range").slider({
                min: 0,
                max: 1440,
                step: 15,
                range: true,
                values: [540, 1020],
                create: function (event, ui) {
                    $.each(initialValues, function (i, v) {
                        updateValue({
                            value: v,
                            handle: $('.ui-slider-handle').eq(i)
                        });
                    });
                },
                slide: function (event, ui) {
                    updateValue(ui);
                }
            });
        });
    *:focus{
outline:0;}
.time-range
{
  padding:0 20px;
}

.ui-slider-horizontal {
  height: 8px;
  background: #D7D7D7;
  border: 1px solid #BABABA;
  box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
  clear: both;
  margin: 8px 0;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;}

.ui-slider {
  position: relative;
  text-align: left;}

.ui-slider-horizontal .ui-slider-range {
  top: -1px;
  height: 100%;}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  height: 8px;
  font-size: .7em;
  display: block;
  border: 1px solid #424453;
  box-shadow: 0 1px 0 #edeef7 inset;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;}

.ui-slider .ui-slider-handle {
  background-color:#424453;
  width: 18px;
  height: 18px;}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 18px;
  cursor: default;
  border: none;
  cursor: pointer;
  background:#ff0000 50% 50% no-repeat;}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.7em;}

.ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: -24px;
    left: -20px;
    min-width: 60px;
    font-size:10px;
    height: 20px;
    color: #333;
    padding: 1px;
    text-align: center;}  

.ui-slider a:focus {
  outline:none;}

#slider-range {
  width: 95%;
  margin: 0px;}

.time-range {
  width: 100%;
  margin:10px 0px;
  display:block;}
  
.time-slider-label {
  display:inline-block;}  

.sliders_step1{
  width: auto;}

#time-range label{
    margin-top:10px;}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="time-range">
  <div class="sliders_step1">
    <div class="slider-range">
    </div>
  </div>
</div>