CODEWITHSUNDEEP
javascriptjquerycordovajquery-mobile
Dennis Nedry
Dennis Nedry

Reputation: 4757

Add a scale to a jquery mobile slider form

I'm trying to add a jquery slider to my phonegap app. Unfortunately I haven't found out how to add a scale on both sides of the slider. Something like: "foo" ----x------ "bar" Till now i only have the slider.

<form>
    <label for="lighting">Rate us</label>
    <input type="range" name="rate" id="rate" min="1" max="7" />
    <input type="submit" name="go" id="go" value="Rate my app!"/>
</form>

Upvotes: 0

Views: 128

Answers (1)

ezanker
ezanker

Reputation: 24738

You could add a scale with tick marks like this:

var ticks = '<div class="sliderTickmarks "><span>1</span></div>';
ticks += '<div class="sliderTickmarks "><span>2</span></div>';
ticks += '<div class="sliderTickmarks "><span>3</span></div>';
ticks += '<div class="sliderTickmarks "><span>4</span></div>';
ticks += '<div class="sliderTickmarks "><span>5</span></div>';
ticks += '<div class="sliderTickmarks "><span>6</span></div>';
ticks += '<div class="sliderTickmarks "><span>7</span></div>';
$("#rate ").closest(".ui-slider").find(".ui-slider-track").prepend(ticks);

.sliderTickmarks {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    width: 16.6%;
    float: left;
    border-right: 1px solid #888;
}
.sliderTickmarks span {
    position: relative;
    left: 100%;
    top: 125%;
    margin-left: -3px;
    font-size: 12px;
    font-weight: normal;
}
.ui-slider-track > div.sliderTickmarks:first-child {
    border-right: 0;
    width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span {
    margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type {
    border-right: 0;
}

DEMO

For other ideas with the slider have a look at this:

https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/

Upvotes: 2

Related Questions