Develop Reference

Slider NoUiSlider value keep range

I'm having troubles to keep the values from a range slider of NoUiSlider visible when submitting a form.
So people can set a range and then hit a submit button. The values from that range slider are nicely submitted via the form however the range of the slider changes to the new set value.
So I have set the range to eg. 0 - 500. When somebody sets the range to eg. 100-400 and then submit the form then the range changes to 100-400. So people can't change the range back to 0 - 500.
So my question:
How can I keep the range as is(so 0 -500) but move the handles to the set values (so 100 - 400)?
So what I have is this:
<form>
<input type="hidden" name="max" value="0" id="filter_form_max" />
<input type="hidden" name="min" value="500" id="filter_form_min" />
<div id="slider-handles"></div>
<input type="submit" class="price-btn" />{{ 'Set price' | t }}
</form>
And JS:
$(function() {
var handlesSlider = document.getElementById('slider-handles');
noUiSlider.create(handlesSlider, {
start: [ 0, 500 ],
format: wNumb({
decimals:0,
thousand: '.'
}),
range: {
'min': [ 0 ],
'max': [ 500 ]
},
tooltips: true,
});
handlesSlider.noUiSlider.on('update', function( values, handle ) {
var minVal = document.getElementById('filter_form_min');
var maxVal = document.getElementById('filter_form_max');
minVal.value = values[0]
maxVal.value = values[1]
});
});

You just need to change values of start array.
Try to change those with following. It worked for me.
//---- some code ---
noUiSlider.create(handlesSlider, {
start: [ 100, 400 ],
//-----

Is there a way to change the template typeahead.js uses based on an HTML attribute from where it's being called?

I'm trying to tweak typeahead so that I can use one function call to dynamically display the data that corresponds to different form inputs.
Let's say I had the HTML below. I want to query the "foo" table and the "bar" table in my database:
<div id="typeahead">
<input name="foo" type="text"/>
</div>
<div id="typeahead">
<input name="bar" type="text"/>
</div>
Would there be a way to do something like:
$('input').typeahead(
{
highlight: false,
minLength: 1
},
{
display: function(suggestion) { return null; },
limit: 10,
source: search,
templates: {
suggestion:
/* if name is foo, show {{foo}}
* if name is bar, show {{bar}}
* etc.
*/
}
});

Customized Interactive Input Range with Google Charts (Pie Chart)

How does one combine a customized input range with the google charts pie chart to create an interactive graph?
The goal is for the Pie chart to display different percentages based on the position of the "input range."
var PercentageDeterminedBySlider would be a percent variable that changes based on the sliders position 1 through 5. The pie chart would then display this percentage.
code for pie chart
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartPie);
function drawChartPie() {
var profitVar2 = PercentageDeterminedBySlider;
var other= 100-profitVar2;
var data3 = google.visualization.arrayToDataTable([
['Name', 'Profit Percentage'],
['Your Profit Percentage' , profitVar2],
['Potential for Growth', other]
]);
var options3 = {
title: 'Profit Percentage',
legend: 'none',
is3D: true,
pieSliceText: 'value',
};
var chart3 = new google.visualization.PieChart(document.getElementById('chart_divPie'));
chart3.draw(data3, options3);
}
code for input Range
<label for="points">Rating:</label>
<input type="text" id="textInput" value="5">
<input type="range" name="points" id="points" value="5" min="1" max="5" onchange="updateTextInput(this.value);">
Click below to see example
Example Image
Lastly, there is a slider(aka input range) integrated with Google charts on the Google website, however its' functionality appears to be very limited. So the goal here is to create a custom slider.

If I understand you correctly, there are some problems in your code. Here is some:
You can get the var PercentageDeterminedBySlider using document.querySelector('#points').value.
When the input change you can call again the method drawChartPie. It will take the updated value from the range.
Pay attention that you need to use praseInt to convert the range's value to int so the chart will work.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartPie);
function drawChartPie() {
var profitVar2 = parseInt(document.querySelector('#points').value);
var other = 100 - profitVar2;
var data3 = google.visualization.arrayToDataTable([
['Name', 'Profit Percentage'],
['Your Profit Percentage' , profitVar2],
['Potential for Growth', other]
]);
var options3 = {
title: 'Profit Percentage',
legend: 'none',
is3D: true,
pieSliceText: 'value',
};
var chart3 = new google.visualization.PieChart(document.getElementById('chart_divPie'));
chart3.draw(data3, options3);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<label for="points">Rating:</label>
<input type="text" id="textInput" value="5">
<input type="range" name="points" id="points" value="5" min="1" max="5" onchange="drawChartPie()">
<div id="chart_divPie"></div>
Click
http://output.jsbin.com/fawehez

How to get selected checkboxes on button click in angularjs

I want to do something like this
<input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label>
<input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label>
<input type="checkbox" ng-model="third" ng-click="chkSelect()"/><label>Third</label>
<input type="checkbox" ng-model="forth" ng-click="chkSelect()"/><label>Forth</label>
<button>Selected</button>
On button click I want to display selected checkbox labelname.
$scope.chkSelect = function (value) {
console.log(value);
};

Because the checkboxes are mapped, you can reference $scope.first, $scope.second, etc in your chkSelect() function. It's also possible to have a set of checkboxes mapped as a single array of data instead of having to give each checkbox a name. This is handy if you are generating the checkboxes, perhaps from a set of data.

I agree with Bublebee Mans solution. You've left out a lot of detail on why you're trying to get the label. In any case if you REALLY want to get it you can do this:
$scope.chkSelect = function (value) {
for(var key in $scope){
var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
if(inputs.length){
var selectedInput = inputs[0];
var label = selectedInput.nextSibling;
console.log(label.innerHTML);
}
};
};
You can mess around with it to see if it's indeed selected.
fiddle: http://jsfiddle.net/pzz6s/
Side note, for anybody who knows angular please forgive me.

If you are dealing with server data, you might need isolated html block and deal with data in controller only.
You can do it by creating array in controller, maybe your data from response, and use ngRepeat directive to deal independently in html code.
Here is what I am telling you:
HTML:
<form ng-controller="MyCtrl">
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="checkbox"
ng-model="my[name]"
id="{{name}}"
name="favorite" />
</label>
<div>You chose <label ng-repeat="(key, value) in my">
<span ng-show="value == true">{{key}}<span>
</label>
</div>
</form>
Javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}

You want to have something like the following in your controller (untested, working from memory):
$scope.checkBoxModels = [ { name: 'first', checked: false }, { name: 'second', checked: false }, { name: 'third', checked: false }, { name: 'fourth', checked: false } ];
Then in your view:
<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>
Then update your function:
$scope.chkSelect = function (checkBoxModel) {
console.log(checkBoxModel.name);
};

Checkboxes are not appearing

The check-box code below is not working for creating check-boxes against each and every folder of tree structure. It is simple java-script and HTML concept of check boxes which I made use of. I want check-boxes to be created for the tree structure against each and every folder(in left hand side ) of the tree hierarchy.
As the moment I am getting the output as a text associated with each and every folder of the tree hierarchy. So is it something I am doing wrong here? If so, kindly suggest me how can I rectify this error.
var tree = new Tree({
model: model,
checkBoxes: true,
persist: false,
branchIcons: true,
branchReadOnly: false,
checkBoxes: true,
nodeIcons: true,
getLabel: function(item) {
if (!item.root)
return '<input type="checkbox" name="'+ item.name +'" id="'+ item.name +'" value="1" /> '+ item.name;
}
}, "tree");