Нужен калькулятор

@Smoke193 · Регистрация: 10.03.2014

Студворк — интернет-сервис помощи студентам

Помогите пожалуйста, нужен калькулятор с trackbar (пример, изображение снизу), не знаю как реализовать :C Подскажите, как и что делать?

@fol · 05.09.2016, 14:21

такие вещи чаще всего делаются на основе jqeury ui

@Smoke193 · 05.09.2016, 14:25 **[ТС]**

как тогда на jquery это реализовать?

@fol · 05.09.2016, 15:08

Это и реализовано на jquery. Точнее на библиотеке, основанной на jquery. Jquery ui ориентирована на интерфейсы

@kalabuni · 05.09.2016, 16:06

Smoke193, зарплата 327 500 т и 60 000 т -- это в тугриках?

вы для Монголии калькулятор делаете?
там, что, в юртах уже серверы ставят?
баранов пересчитывать?

@Smoke193 · 05.09.2016, 18:15 **[ТС]**

Отличная шутка

но это "тенге"

@Padimanskas · 06.09.2016, 22:45

Smoke193, мне показались интересными рейнж слайдеры и я собрал один на основе какого-то хлама из codepen и fiddle. css компиляция из sass и в код на jquery нужно добавить еще префиксы для других браузеров. все остальное т.е. pricing tables можно нарисовать на бутстрап.
Пиу

дуплет

HTML5
1
2
3
4
<div class="range-slider">
  <input class="range-slider__range" type="range" value="30" min="0" max="100">
  <span class="range-slider__value">0</span>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
*,
*:before,
*:after {
  box-sizing: border-box;
}
 
body {
  padding: 60px 20px;
}
 
@media (min-width: 600px) {
  body {
    font-family: sans-serif;
    padding: 60px;
    color: #FF5110;
    font-weight: bold;
  }
}
 
.range-slider {
  margin: 60px 0 0 0%;
}
 
.range-slider {
  width: 100%;
}
 
.range-slider__range {
  -webkit-appearance: none;
  width: calc(100% - (73px));
  height: 2px;
  border-radius: 5px;
  background: #CCCCCC;
  outline: none;
  padding: 0;
  margin: 0;
}
 
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF5110;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}
 
.range-slider__range::-webkit-slider-thumb:hover {}
 
.range-slider__range:active::-webkit-slider-thumb {}
 
.range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}
 
.range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}
 
.range-slider__range:active::-moz-range-thumb {
  background: #1abc9c;
}
 
.range-slider__value {
  display: inline-block;
  position: relative;
  width: 60px;
  line-height: 20px;
  text-align: center;
  padding: 5px 10px;
  margin-left: 8px;
}
 
::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}
 
input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var range = $('.range-slider__range'),
  value = $('.range-slider__value');
  
  function setColorRange(){
   var val = (range.val() - range.attr('min')) / (range.attr('max') - range.attr('min'));
   
    range.css('background-image',
    '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #FF5110), ' + 'color-stop(' + val + ', #CCCCCC)' + ')'
  );
  }
  
  setColorRange();
  
range.on('input', function() {
  $(this).next(value).html(this.value);
 
setColorRange();
 
 
});

@Smoke193 · 07.09.2016, 07:27 **[ТС]**

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

мне показались интересными рейнж слайдеры и я собрал один на основе какого-то хлама из codepen и fiddle. css компиляция из sass и в код на jquery нужно добавить еще префиксы для других браузеров. все осталь

Большое спасибо, не знаю что бы я делал без вас!

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Smoke193 0 / 0 / 0 Регистрация: 10.03.2014 Сообщений: 24

	Нужен калькулятор 05.09.2016, 13:57. Показов 1238. Ответов 7 Метки нет (Все метки) Помогите пожалуйста, нужен калькулятор с trackbar (пример, изображение снизу), не знаю как реализовать :C Подскажите, как и что делать? Миниатюры 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	05.09.2016, 14:21
	такие вещи чаще всего делаются на основе jqeury ui 0

@Smoke193 0 / 0 / 0 Регистрация: 10.03.2014 Сообщений: 24
	05.09.2016, 14:25 [ТС]
	как тогда на jquery это реализовать? 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	05.09.2016, 15:08
	Это и реализовано на jquery. Точнее на библиотеке, основанной на jquery. Jquery ui ориентирована на интерфейсы 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	05.09.2016, 16:06
	Smoke193, зарплата 327 500 т и 60 000 т -- это в тугриках? вы для Монголии калькулятор делаете? там, что, в юртах уже серверы ставят? баранов пересчитывать? 0

@Smoke193 0 / 0 / 0 Регистрация: 10.03.2014 Сообщений: 24
	05.09.2016, 18:15 [ТС]
	Отличная шутка но это "тенге" 0

Нужен калькулятор

Решение