{"record":{"id":"12846be92b0f3c41","repo":"ankane/pghero","slug":"nouislider-create-requires-a-single-element-got","errorCode":null,"errorMessage":"noUiSlider: create requires a single element, got: {target}","messagePattern":"noUiSlider: create requires a single element, got: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"app/assets/javascripts/pghero/nouislider.js","lineNumber":2314,"sourceCode":" removePips: removePips,\n removeTooltips: removeTooltips,\n getPositions: function () {\n return scope_Locations.slice();\n },\n getTooltips: function () {\n return scope_Tooltips;\n },\n getOrigins: function () {\n return scope_Handles;\n },\n pips: pips, // Issue #594\n };\n return scope_Self;\n }\n // Run the standard initializer\n function initialize(target, originalOptions) {\n if (!target || !target.nodeName) {\n throw new Error(\"noUiSlider: create requires a single element, got: \" + target);\n }\n // Throw an error if the slider was already initialized.\n if (target.noUiSlider) {\n throw new Error(\"noUiSlider: Slider was already initialized.\");\n }\n // Test the options and create the slider environment;\n var options = testOptions(originalOptions);\n var api = scope(target, options, originalOptions);\n target.noUiSlider = api;\n return api;\n }\n var nouislider = {\n // Exposed for unit testing, don't use this in your application.\n __spectrum: Spectrum,\n // A reference to the default classes, allows global changes.\n // Use the cssClasses option for changes to one slider.\n cssClasses: cssClasses,\n create: initialize,","sourceCodeStart":2296,"sourceCodeEnd":2332,"githubUrl":"https://github.com/ankane/pghero/blob/7edb57986ffd36f9d64f0830c4ccc90a5eac46d6/app/assets/javascripts/pghero/nouislider.js#L2296-L2332","documentation":"initialize() requires a single DOM element as its first argument and checks it by looking for a truthy target with a nodeName property. A CSS selector string, null (element not found), a jQuery collection, or a NodeList all fail this check and throw with the offending target interpolated into the message.","triggerScenarios":"noUiSlider.create(\".slider\", options) instead of passing document.querySelector(\".slider\"); calling create before the element exists (script in without defer, or element rendered later by AJAX) so querySelector returns null; passing $(\".slider\") from jQuery; passing document.querySelectorAll(\".slider\") for multiple elements.","commonSituations":"Rails apps with Turbo/Turbolinks where the DOM is replaced and initialization runs before the new element exists; SPAs that mount sliders conditionally; developers used to jQuery-style plugin APIs that accept selector strings.","solutions":["Pass a resolved element: const el = document.querySelector(\".slider\"); then create(el, options)","Run initialization after the DOM is ready (DOMContentLoaded) or after the framework confirms the element is mounted","For multiple sliders, iterate the NodeList and create one slider per element"],"exampleFix":"// before\nnoUiSlider.create(\".slider\", options);\n\n// after\nconst el = document.querySelector(\".slider\");\nif (el) noUiSlider.create(el, options);","handlingStrategy":"type-guard","validationCode":"const el = typeof target === \"string\" ? document.querySelector(target) : target;\nif (el instanceof HTMLElement) {\n noUiSlider.create(el, options);\n}","typeGuard":"function isSliderTarget(t) {\n return t instanceof HTMLElement;\n}","tryCatchPattern":null,"preventionTips":["Never pass selector strings or jQuery objects - resolve to a single HTMLElement first","Initialize after DOMContentLoaded or after your framework confirms the node is mounted"],"tags":["nouislider","dom","initialization","javascript"],"backgroundTag":"invalid-dom-element","analyzedSha":"7edb57986ffd36f9d64f0830c4ccc90a5eac46d6","analyzedAt":"2026-08-21T17:33:54.942Z","schemaVersion":2},"datasetVersion":"2026-08-21T18:17:14.833Z"}