Range Slider, Tooltip And Retrieving Attachment Field In SharePoint

<html>
<style type="text/css">
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: 60px;
margin-left: -160px;
width: 300px;
line-height: 16px;
}
a.tooltip:hover span {
margin-top: 180px;
display: inline;
position: absolute;
border: 2px solid #FFF;
color: #EEE;
background: #333 url(http://www.menucool.com/tooltip/cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
}
.callout {
z-index: 20;
position: absolute;
border: 0;
top: -14px;
left: 120px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 2px;
box-shadow: 0px 0px 8px 4px #666;
/*opacity: 0.8;*/
}
img.img-responsive.img-align {
margin: 0 auto;
width: 250px;
height: 150px;
margin-top: 20px;
margin-bottom: 10px;
}
span.imp {
font-size: 140%;
color: ghostwhite;
}
table#tableEmployee {}
.spacing-table {
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 15px;
table-layout: fixed;
width: 100%;
border-spacing: 0 5px;
/* this is the ultimate fix */
}
.spacing-table th {
text-align: left;
padding: 5px 15px;
}
.spacing-table td {
padding-left: 25px;
border-width: 3px 0;
width: 50%;
border-color: darkred;
border-style: solid;
background-color: rgba(109, 7, 7, 0.29);
color: white;
}
.spacing-table td:first-child {
border-left-width: 3px;
border-radius: 50px 0 0 5px;
}
.spacing-table td:last-child {
border-right-width: 3px;
border-radius: 0 5px 5px 0;
}
.spacing-table thead {
display: table;
table-layout: fixed;
width: 100%;
}
.spacing-table tbody {
display: table;
table-layout: fixed;
width: 100%;
border-spacing: 0 30px;
border-collapse: separate;
}
div#PriceSlider {
width: 22%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function() {
$("#PriceSlider").slider({
min: 5000,
max: 100000,
values: [5000, 20000],
range: true,
slide: function(event, ui) {
$("#price").val("₹" + ui.values[0] + " - ₹" + ui.values[1]);
}
});
$("#PriceSlider").on("slidestop", function(event, ui) {
var pricefilterstring = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=((subcategory eq '" + name + "') and (price gt " + ui.values[0] + " and price lt " + ui.values[1] + "))";
getitems(pricefilterstring);
});
var name = getParameterByName("itemid");
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('MasterList')/items?$select=Title,ID,price,description,phonenumber,subcategory,AttachmentFiles/ServerRelativeUrl&$expand=AttachmentFiles&$filter=subcategory eq '" + name + "'";
getitems(requestUri);
function getitems(urlstring) {
$.ajax({
url: urlstring,
type: "GET",
headers: {
"accept": "application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var objItems = data.d.results;
var tableContent = '<table id="tableEmployee" class="spacing-table" >';
for (var i = 0; i < objItems.length; i++) {
tableContent += '<tr>';
console.log(objItems[i].ID);
tableContent += "<td> <span class='imp'> " + objItems[i].Title + " </span></td>";
tableContent += "<td><a href='#'class='tooltip'><img src='" + objItems[i].AttachmentFiles.results[0].ServerRelativeUrl + "'class='img-responsive img-align'alt='Responsive image'> <span><img class='callout' src='http://www.menucool.com/tooltip/cssttp/callout_black.gif' /> <strong>Details</strong><br />" + objItems[i].description + "<br />₹" + objItems[i].price + "</span></a></td>";
tableContent += "<td><a href='UrUrl/SitePages/Ad%20Details%20View.aspx?itemid=" + objItems[i].ID + "'>Contact the owner</td>";
tableContent += '</tr>';
}
tableContent += '</table>';
$('#CustomerPanel').empty();
$('#CustomerPanel').append(tableContent);
}
function onError(error) {
alert('Error');
}
}
});
</script>
<div id="PriceSlider"></div>
<p> <label for="price">Price range:</label> <input type="text" id="price" style="border:0; color:#b9cd6d; font-weight:bold;"> </p>
<div id="CustomerPanel"> </div>
</html>