How to customize slider on my webpage?

How to customize slider on my webpage?

Hey!

New at jQuery and need some help.
Have some nice sliders on my web page, but have two problems.
1) The sliders are all showing this value of $ 75-500, but I want my sliders to show different values - how can I do that?
2) The text field have a white backgrountd witch I want to remove -how?

Here is my source code:

<!DOCTYPE html>


<html>

<head>

{% block extra-head %}{% endblock %}

<link rel="stylesheet" href="{{ media_url }}css/style.css" />

<title>{% block title %}{% endblock %}</title>

{% include "HeaderHeader.html" %}{% block extra-head-bottom %}{% endblock %}



<script type="text/javascript">

function showValue(newValue,toupdate)

{

document.getElementById(toupdate).innerHTML=newValue;

}

function deselect(e) {

$('.pop').slideFadeToggle(function() {

e.removeClass('selected');

});

}


$(document).ready(function(){

$( '#fromdate' ).datepicker({ dateFormat: 'dd.mm.yy' });

$( '#todate' ).datepicker({ dateFormat: 'dd.mm.yy' });

$('#savesearchlink').on('click', function() {

var logindiv=$('#savesearchloginbutton');

if (logindiv.hasClass('hidden'))

logindiv.removeClass('hidden');

else

logindiv.addClass('hidden');

//if($(this).hasClass('selected')) {

// deselect($(this));

//} else {

// $(this).addClass('selected');

// $('.pop').slideFadeToggle();

//}

return false;

});

$('#savesearchloginbutton').on('click', function() {

var mypos=$(this).offset();

mypos.left += 20;

var lb = $('#loginbox');

lb.css(mypos);

lb.removeClass('hidden');

});

$('.close').on('click', function() {

deselect($('#contact'));

return false;

});

});

$.fn.slideFadeToggle = function(easing, callback) {

return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);

};

$(function () {

$(".slide").each(function () {

var div = $(this),

amount = div.find(".amount"),

values = [75, 300];

div.find(".slider-range").slider({

range: true,

min: 0,

max: 500,

values: values,

slide: function (event, ui) {

amount.val("$" + ui.values[0] + " - $" + ui.values[1]);

}

});

console.log($("#slider-range").slider("values"))

amount.val("$" + values[0] + " - $" + values[1]);



})

})



</script>


</head>


<body style="background-image:url('/static/images/bilder/brillant.png')">

{% include "Header.html" %}


<main class="container">


<div class="row" Style="height: 25px;"></div>


<div class="row">

<div class="col-md-3">


<div class="row" Style="height: 25px;"></div>

<div class="box1">

<div class="row">

<div class="col-md-12"><p>TYPE</p></div>

</div>

<div class="row">

<div class="col-md-10">

<div class="radio">

<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">BUY</label>

</div>

</div>

</div>

<div class="row">

<div class="col-md-10">

<div class="radio">

<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Rent</label>

<div id="datepicker">

<input type="text" name="fromdate" id="fromdate" class="form-control" value="dd.mm.yy" />

<input type="text" name="todate" id="todate" class="form-control" value="dd.mm.yy"/>

</div>

</div>

</div>

</div>

</div>

<div class="row" Style="height: 25px;"></div>

<div class="box2">

<div class="row" Style="height: 25px;">

<div class="col-md-6"> MY SEARCH</div>

<div class="col-md-6"><a href="#" id="savesearchlink">Save Search</a></div>

</div>

<div id="savesearchloginbutton" class="row hidden" style="padding: 10px 0;">

<div class="messagepop pop">

<form method="post" id="new_message" action="/messages">

<div class="col-md-12"><label for="body">Please log in to save your search</label></div>

<div class="col-md-11"><button id="savesearchloginbutton" type="button" class="btn btn-success btn-block">LOGIN</button></div>

</form>

</div>

</div>


<div class="row" Style="height: 10px;"></div>

<div class="row">

<div class="col-md-12">

<form class="navbar-form" role="search">

<div class="input-group">

<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">

<div class="input-group-btn">

<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>

</div>

</div>

</form>

</div>

</div>

<div class="row">

<div class="col-md-11">

<div class="slide">

<p>

<label for="amount">Price:

<input type="text" class="amount" readonly style="border:0; color:#108892; font-weight:light;">

</label>

</p>

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

</div>

</div>

</div>

<div class="row">

<div class="col-md-11">

<div class="slide">

<p>

<label for="amount">Kvm:

<input type="text" class="amount" readonly style="border:0; color:#108892; font-weight:light;">

</label>

</p>

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

</div>

</div>

</div>

<div class="row">

<div class="col-md-11">

<div class="slide">

<p>

<label for="amount">Bedrooms:

<input type="text" class="amount" readonly style="border:0; color:#108892; font-weight:light;">

</label>

</p>

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

</div>

</div>

</div>

<div class="row">

<div class="col-md-11">

<div class="slide">

<p>

<label for="amount">Bathrooms:

<input type="text" class="amount" readonly style="border:0; color:#108892; font-weight:light;">

</label>

</p>

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

</div>

</div>

</div>

<div class="row" style="height:25px;"> </div>

<div class="row">

<div class="col-md-12">

<div class="filters_dropdown">

<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Property type<span class="caret"></span></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>

</div>

</div>

</div>

<div class="row">

<div class="col-md-12">

<div class="filters_dropdown">

<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> New/Resale<span class="caret"></span></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>

</div>

</div>

</div>

</div> <!---box2--->

<div class="row" Style="height: 15px;"></div>

<div class="box3">

<div class="row">

<div class="col-md-12"><a href="/searchbuy/advanced_search/"><span class="glyphicon glyphicon-search"></span> ADVANCED SEARCH</a></div>

</div>

</div> <!---box3--->


<div class="row" Style="height: 15px;"></div>

<div class="box4">

<div class="row">

<div class="col-md-12"><a href="/searchbuy/map_search/"><span class="glyphicon glyphicon-map-marker"></span> MAP SEARCH</a></div>

</div>

</div> <!---box4--->

<div class="row" Style="height: 25px;"></div>


</div> <!--first col-md-3-->


<div class="col-md-9">

{% block content %}

{% endblock %}

</div> <!--first col-md-9-->

</div> <!--end row for main-->


</main>


</body>

{% include "Menu.html" %}

</html>