Как подключить trackbar к input? - HTML и CSS

Женя32 · 26.10.2016, 16:49

Подскажите пожалуйста, как подключить трекбар к инпуту? чтоб значения трекбара, отображалось в инпутах..

Делаю вот так, но результат нуль:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="trackbar/trackbar.css" rel="stylesheet" type="text/css" />
<link href="trackbar/jQuery/trackbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="trackbar/trackbar.js"></script>
<script type="text/javascript" src="trackbar/jQuery/jquery.trackbar.js"></script>
<script type="text/javascript" src="trackbar/jQuery/jquery-1.2.3.min.js"></script>
 
<title></title>
</head>
 
<body>
 
<form method="get" action="search-filter.php">
 
<div id="block-input-price">
<ul>
<li><p>от</p></li>
<li><input type="text" id="start-price" name="start_price" value="1000" /> </li>
<li><p>до</p></li>
<li><input type="text" id="end-price" name="end_price" value="10000" /> </li>
 
</ul>
</div>
 
<div id="block-track-bar">  <script type="text/javascript">
    //<![CDATA[
    
    trackbar.getObject('block-input-price').init(
        {
            onMove : function() {
                trackbar.getObject('start-price').updateLeftValue(this.leftValue);
                trackbar.getObject('end-price').updateRightValue(this.rightValue)
            },
            width : 300, // px
        //  leftLimit : 0, // unit of value
            leftValue : 30, // unit of value
            rightLimit : 8255, // unit of value
            rightValue : 1000, // unit of value
            hehe : ":-)"
        }
    );
    // -->
    </script>
</div>
 
 
</form>
 
 
</body>
</html>

Прикрепляю проект....

Женя32 · 26.10.2016, 19:27

Пробовал делать как на видео, но, почему то трекбар вообще не выводиться.
Видео: https://www.youtube.com/watch?v=CUOr...04#t=124.40101

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="trackbar/trackbar.css" rel="stylesheet" type="text/css" />
<link href="trackbar/jQuery/trackbar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="trackbar/trackbar.js"></script>
<script type="text/javascript" src="trackbar/jQuery/jquery.trackbar.js"></script>
<script type="text/javascript" src="trackbar/jQuery/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$('block-input-price').trackbar({
			onMove : function() {
			document.getElementById("start-price").Value = this.leftValue;
			document.getElementById('end-price').Value = this.rightValue;
			},
			width : 160, 
			leftLimit : 1000, 
			leftValue : 1000, 
			rightLimit : 50000,
			rightValue : 1000, 
			roundUp : 1000
});
});
</script>
<title></title>
</head>

<body>

<form method="get" action="search-filter.php">

<div id="block-input-price">
<ul>
<li><p>от</p></li>
<li><input type="text" id="start-price" name="start_price" value="1000" /> </li>
<li><p>до</p></li>
<li><input type="text" id="end-price" name="end_price" value="10000" /> </li>

</ul>
</div>

<div id="block-track-bar">	
</div>


</form>


</body>
</html>

pompiduskus · 26.10.2016, 19:46

Вот так еще можно, это уже тип атрибута, если я не ошибаюсь HTML-5

Код:

<!DOCTYPE html>
<html lang="en-US">
<head>

    <meta charset="utf-8"/> 
    <title>input-[RANGE]</title>

    <script type="text/javascript">

        function byId(id) { return document.getElementById(id); }

        // ------------------------------------------------------------
        var range_bar, res;

        window.addEventListener('load', function(){

            res = byId('res');

            range_bar = byId('myTrackbar');
            range_bar.onmousemove = function(){
                res.innerHTML =  "POS: ['"+this.value+"']";                 

            }


        });

        // ------------------------------------------------------------

    </script>

    <style>
        #wrapper{ width: 500px; height: 80px; border: solid 1px #000; 
            text-align: center; line-height: 30px; }

        #myTrackbar{ width: 440px; height: 20px; }

        #res{ width: 440px; height: 20px; border-top: solid 1px #000; 
            text-align: center; line-height: 20px; margin: 0 auto;
            padding-top: 10px; }



    </style>


</head>
<body>

<div id="wrapper">
    
    <input type="range" id="myTrackbar" min="0" max="1000" value="500" step="10"/>
    <div id="res">POS: ['500']</div>

</div>
 
 
</body>
</html>

Женя32 · 26.10.2016, 20:14

Почему ошибка в этой строке?:

Код HTML:

        function byId(id) { return document.getElementById(id); }

pompiduskus · 26.10.2016, 20:37

У меня ошибок не показывает. Если у вас эта ошибка постоянно выводится, то попробуйте перезагрузить страницу с принудительным сбросом КЭША, [CTRL+R] и попробуйте переименовать агрументвот так.

был

Код:

function byId(id) { return document.getElementById(id); }

стал

Код:

function byId(_id) { return document.getElementById(_id); }

Скорее всего что, у вас уже есть какой-то код. И идет внутренний конфликт имен. Именная коллизия.

ps: А что за ошибка то хоть ? Что пишет ?

Женя32 · 26.10.2016, 22:01

Цитата:

Сообщение от pompiduskus

У меня ошибок не показывает. Если у вас эта ошибка постоянно выводится, то попробуйте перезагрузить страницу с принудительным сбросом КЭША, [CTRL+R] и попробуйте переименовать агрументвот так.

был

Код:

function byId(id) { return document.getElementById(id); }

стал

Код:

function byId(_id) { return document.getElementById(_id); }

Скорее всего что, у вас уже есть какой-то код. И идет внутренний конфликт имен. Именная коллизия.

ps: А что за ошибка то хоть ? Что пишет ?

1. У меня просто красным подсвечивается...
2. Когда бегунок передвигаешь, ничего не меняется. Посмотрите видео, которое находится в прикрепленном архиве
3. Стиль. Откройте файл bind.html, который находится в папке trackbar... Нужен чтоб такой стиль был...

pompiduskus · 26.10.2016, 22:18

извините, но мне лень ! =)

Пепел Феникса · 26.10.2016, 23:01

в консоли браузера будет написана ошибка.

Женя32 · 27.10.2016, 05:29

Цитата:

Сообщение от Пепел Феникса

в консоли браузера будет написана ошибка.

Uncaught SyntaxError: Unexpected token <

pompiduskus · 27.10.2016, 13:26

посмотри что у тебя там 2 раза одна строка написана.

26.10.2016, 20:14	#4
Женя32 Форумчанин Регистрация: 12.09.2008 Сообщений: 621	Почему ошибка в этой строке?: Код HTML: function byId(id) { return document.getElementById(id); }

26.10.2016, 20:37	#5
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	У меня ошибок не показывает. Если у вас эта ошибка постоянно выводится, то попробуйте перезагрузить страницу с принудительным сбросом КЭША, [CTRL+R] и попробуйте переименовать агрументвот так. был Код: `function byId(id) { return document.getElementById(id); }` стал Код: `function byId(_id) { return document.getElementById(_id); }` Скорее всего что, у вас уже есть какой-то код. И идет внутренний конфликт имен. Именная коллизия. ps: А что за ошибка то хоть ? Что пишет ? <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

26.10.2016, 22:18	#7
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	извините, но мне лень ! =) <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

26.10.2016, 23:01	#8
Пепел Феникса Старожил Регистрация: 28.01.2009 Сообщений: 21,000	в консоли браузера будет написана ошибка. Хорошо поставленный вопрос это уже половина ответа. \| Каков вопрос, таков ответ. Программа делает то что написал программист, а не то что он хотел. Функции/утилиты ждут в параметрах то что им надо, а не то что вы хотите.

27.10.2016, 13:26	#10
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	посмотри что у тебя там 2 раза одна строка написана. <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как изменить направление ползунка в TrackBar?	bilibian	Общие вопросы Delphi	11	31.10.2015 15:17
Как убрать фокус с TrackBar??????	NBSTUDIO	Общие вопросы Delphi	1	11.08.2009 16:24
как прокрутить ListBox с помощью TrackBar	Dr.Badnezz	Общие вопросы Delphi	4	06.01.2009 14:54
Как поместить trackbar в statusbar	SeRhy	Общие вопросы Delphi	4	11.06.2008 03:58
TrackBar как в Windows Media Player	Viteef	Компоненты Delphi	11	09.05.2007 10:42