Спасибо , я так и сделал . Можно сделать немного проще отправив значения в адресную строку и изъять их от туда. Возможно так даже проще , так как несколько предложений в коде сократится , в том плане что адресная строка обновляется по дефолту при переходе в другие страницы , и обновляется по событию без удаления .
Может быть кому то поможет , вот код :
$(document).ready(function () {
fixedcount()
getUrlVar()
fixed()
});
function getUrlVar() {
var urlVar = window.location.href; // получаем параметры из урла
var resultArray = []; // массив для хранения переменных
var valueAndKey = []; // массив для временного хранения значения и имени переменной
arrayVar1 = (urlVar.substr(31)).split('start_price='); // разбираем урл на параметры
if (arrayVar1[0] == "e") return false;
for (i = 0; i < arrayVar1.length; i++) { // перебираем все переменные из урла
valueAndKey1 = arrayVar1[i].split('#'); // пишем в массив имя переменной и ее значение
}
arrayVar2 = (urlVar.substr(31)).split('end_price='); // разбираем урл на параметры
if (arrayVar2[0] == "e") return false;
for (i = 0; i < arrayVar2.length; i++) { // перебираем все переменные из урла
valueAndKey2 = arrayVar2[i].split('='); // пишем в массив имя переменной и ее значение
}
res1 = valueAndKey1;
res2 = valueAndKey2;
}
getUrlVar(); // вывел функцию в общий поток кода что бы извлечь переменные
value1 = res1[0];
value2 = res2[0];
var drag = false;
values = [];
for (i = 0; i < 2172; i++) {
h = (i + "").length < 1 ? "0" + i : i;
values.push(h)
}
$('.slider').each(function (i, e) {
updateView(e);
});
$(".slider>.bar>.lp,.slider>.bar>.rp").on("mousedown", function () {
drag = $(this); // это (.slider>.bar>.lp) или (.slider>.bar>.rp) в зависимости от того какой ползунок нажат
var n = localStorage.getItem('left'); // перед движением ползунка по нажатию беру измененное значение и записываю в аттрибут тега
var m = localStorage.getItem('width'); // перед движением ползунка по нажатию беру измененное значение и записываю в аттрибут тега
$('.lp').attr("data-pos", n); // обновляю данные аттрибута
$('.rp').attr("data-pos", m); // обновляю данные аттрибута
localStorage.removeItem("left"); // удаляю старую запись в локал для последующей цепочки
localStorage.removeItem("width"); // удаляю старую запись в локал для последующей цепочки
})
$(document).on("mousemove", function (e) {
if (!drag) return;
var x = (e.pageX - $(drag).outerWidth() - $(drag).parent().parent().offset().left) / $(drag).parent().parent().outerWidth();
// $(drag).outerWidth() / 2 - это убрали отступы ползунков, $(drag).parent().parent().offset().left) - это отступ от левого края экрана до элемента, $(drag).parent().parent().outerWidth() - это ширина элемента 200px
if (x < 0) x = 0;
if (x > 0.921) x = 0.921;
var rp = $(drag).parent().find(".rp");
var lp = $(drag).parent().find(".lp");
if ($(drag).hasClass("lp") && x > $(rp).attr("data-pos")) {
$(rp).attr("data-pos", x); // что ползунки не выходили за границу линии
}
if ($(drag).hasClass("rp") && x < $(lp).attr("data-pos")) {
$(lp).attr("data-pos", x); // что ползунки не выходили за границу линии
}
$(drag).attr("data-pos", x); // меняет число атрибута('.lp' и '.rp') ".rp" 0.91 ...
updateView()
});
$(document).on("mouseup", function () {
drag = false;
var val1 = $('.gmc-input1').val();
var val2 = $('.gmc-input2').val();
parent.location.hash = "start_price=" + val1 + "#end_price=" + val2;
var left = $('.lp').attr("data-pos");
var width = $('.rp').attr("data-pos");
localStorage.setItem('left', left); // для записи данных когда остановлен ползунок в выбранной точке
localStorage.setItem('width', width); // для записи данных когда остановлен ползунок в выбранной точке
});
function updateView() {
var l = $('.slider').find(".lp").attr("data-pos"); // 0
var r = $('.slider').find(".rp").attr("data-pos"); // 1
var x = $('.slider').outerWidth() * l; // 0
var w = (r - l) * $('.slider').outerWidth(); // 200
var n = localStorage.getItem('left'); // для фиксации ползунка который не нажат
var m = localStorage.getItem('width'); // для фиксации ползунка который не нажат
var ar1 = n != undefined ? n : x;
var ar2 = m != undefined ? m : w;
$('.slider').find(".bar").css({ left: ar1 + "px", width: ar2 + "px" });
var index = Math.round(values.length * l);
if (index >= values.length)
index = values.length - 1;
document.querySelector(".gmc-input1").value = values[index];
index = Math.round(values.length * r);
if (index >= values.length)
index = values.length - 1;
document.querySelector(".gmc-input2").value = values[index];
}
function fixed() {
if (value1 == '') return ;
if (value2 == '') return ;
var n = value1 / 10; // сделать условие для с массивом values так как тут value переменные
var m = (value2 - value1) / 10;
$('.slider').find(".bar").css({ left: n + "px", width: m + "px" });
document.querySelector(".gmc-input1").value = value1;
document.querySelector(".gmc-input2").value = value2;
}
function fixedcount() { // При обновлении страницы ползунки по дефолту
var l = $('.slider').find(".lp").attr("data-pos"); // 0
var r = $('.slider').find(".rp").attr("data-pos"); // 1
var x = $('.slider').outerWidth() * l; // 0
var w = (r - l) * $('.slider').outerWidth(); // 200
$('.slider').find(".bar").css({ left: x + "px", width: w + "px" });
var index = Math.round(values.length * l);
if (index >= values.length)
index = values.length - 1;
document.querySelector(".gmc-input1").value = values[index];
index = Math.round(values.length * r);
if (index >= values.length)
index = values.length - 1;
document.querySelector(".gmc-input2").value = values[index];
};
Простой